基于el-progress实现基础的进度条

正常进度条写法

<el-progress
    :percentage="percentage"
    :show-text="true"
    type="line"
    class="progress"
></el-progress>

接下来让他更加美观点，加入遮罩

增加一些提示性的字符

.loading {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: black;
  opacity: 0.8;
  z-index: 200000000000000000;
}

将进度条整体水平垂直居中

<div class="loading">
  <div class="progress-wrap">
    <h4 class="tips">{{ message }}</h4>
    <!--进度条-->
    <el-progress
    	:percentage="percentage"
    	:show-text="true"
     	type="line"
      class="progress"
    ></el-progress>
  </div>
</div>

设置loading动画

.loading {
	display: flex;
  justify-content: center;
}
.progress-wrap {
  align-self: center;
  transform: translateY(50px);
}

.tips {
  color: #409eff;
  &::after {
    content: '';
    -webkit-animation: dot 1s infinite;
    animation: dot 1s infinite;
  }
}

.progress {
	width: 200px;
	height: 200px;
}

最终效果

@keyframes dot {
  0%,
  100% {
    content: '';
  }
  25% {
    content: '.';
  }
  50% {
    content: '..';
  }
  75% {
    content: '...';
  }
}

基于canvas实现进度条

了解canvas

首先在开始使用canvas前需要了解width，style.width的区别，值得注意的是在不写width和height的时候，默认为300*150

当在标签上写上width、height时

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
</script>

style.width = 100、style.height = 100，canvas进行缩小

假设style大小为100*100，canvas画布大小200*100，lineTo(200, 100)

<canvas id="myCanvas" width="200" height="100" style="width: 100px; height: 100px; border:1px solid #c3c3c3;">
</canvas>

$\frac{200}{100} = \frac{200}{x}$

$\frac{100}{100} = \frac{100}{y}$

可以得到lineTo的最后坐标为(100, 100)

style.width = 300、style.height = 300，canvas进行放大

假设style大小为300*300，canvas画布大小300*150，lineTo(300, 300)

<canvas id="myCanvas" width="300px" height="150px" style="width: 300px; height: 300px; border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

$\frac{300}{300} = \frac{300}{x}$

$\frac{150}{300} = \frac{300}{y}$

x = 300

y = 600

可以得到lineTo的最后坐标为(300, 600)，宽度高度超过300以后的直线将被隐藏

绘制canvas

canvas.width / canvas.height 表示画布真实大小，其实我们并不可见
canvas.style.width / canvas.style.height 表示画布输出到浏览器我们可见的最终的大小
解决缩放后直线模糊的问题具体见(解决canvas画图模糊的问题)[segmentfault.com/a/119000000…]

准备canvas

<canvas id="canvas" width="300" height="300"></canvas>

初始化默认值

// 获取canvas对象
const canvas = document.getElementById('canvas');
// 获取画图环境
const context = canvas.getContext('2d');
// 设置速度
let speed = 0.1;
// 设置弧度
let rad = Math.PI*2/100;

绘制外层环形

function drawCircle() {
  context.save();
  // 路径开始
  context.beginPath();
  // 设置线宽
  context.lineWidth = 2;
  // 设置描边样式
  context.strokeStyle = "#eee";
  // 用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
  context.arc(canvas.width / 2, canvas.height / 2, 100 , 0, Math.PI*2, false);
  // 绘制
  context.stroke();
  // 路径结束
  context.closePath();
  context.restore();
}

绘制外层圆

function drawProgress(n) {
  context.save();
  context.strokeStyle = "#409eff";
  context.lineWidth = 5;
  context.beginPath();
  context.arc(canvas.width / 2, canvas.height / 2, 100 , -Math.PI/2, -Math.PI/2 + n * rad, false);
  context.stroke();
  context.closePath();
  context.restore();
}

开始动画

(function drawFrame(){
    window.requestAnimationFrame(drawFrame);
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawCircle();
    drawProgress(speed);
    if(speed > 100) speed = 0;
    speed += 0.1;
})();

加入文字提示

function text(n){
  context.save();
  context.strokeStyle = "#409eff";
  //设置字体大小和字体
  context.font = "40px Arial";
  //绘制字体，并且指定位置
  context.strokeText(n.toFixed(0)+"%", canvas.width - 20, canvas.height + 20);
  context.restore();
}

function drawFrame(){
    window.requestAnimationFrame(drawFrame);
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawCircle();
+   text(speed)
    drawProgress(speed);
    if(speed > 100) speed = 0;
    speed += 0.1;
};

实现环形进度条

参考

Canvas 实现圆形进度条并显示数字百分比

进度条实现