Progress bar based on EL-Progress

  • Normal progress bar writing method
<el-progress
    :percentage="percentage"
    :show-text="true"
    type="line"
    class="progress"
></el-progress>
Copy the code

Now to make it even more beautiful, add a mask

  • Add some suggestive characters
.loading {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: black;
  opacity: 0.8;
  z-index: 200000000000000000;
}
Copy the code
  • Center the progress bar horizontally and vertically
<div class="loading">
  <div class="progress-wrap">
    <h4 class="tips">{{ message }}</h4>
    <! -- Progress bar -->
    <el-progress
    	:percentage="percentage"
    	:show-text="true"
     	type="line"
      class="progress"
    ></el-progress>
  </div>
</div>
Copy the code
  • Setting loading animation
.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;
}
Copy the code
  • The final result
@keyframes dot {
  0%.100% {
    content: ' ';
  }
  25% {
    content: '. ';
  }
  50% {
    content: '.. ';
  }
  75% {
    content: '... '; }}Copy the code

Progress bar based on Canvas

Understand the canvas

First of all, we need to know the difference between width and style.width before using canvas. It is worth noting that the default value is 300*150 when width and height are not written

When width and height are written on the label

<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>
Copy the code

Width = 100, style. Height = 100, canvas zoom

Assume style size is 100*100, canvas canvas size is 200*100, lineTo(200, 100)

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


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


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

You get the lineTo’s final coordinate is (100, 100).

Width = 300, style. Height = 300, canvas zoom

Assume style size is 300*300, canvas canvas size is 300*150, lineTo(300, 300)

<canvas id="myCanvas" width="300px" height="150px" style="width: 300px; height: 300px; border:1px solid #c3c3c3;">Your browser does not support the HTML5 canvas tag.</canvas>
Copy the code


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


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

x = 300

y = 600

The final coordinates of the lineTo can be obtained as (300, 600), and lines with width and height above 300 will be hidden

conclusion

  • Canvas. width/canvas.height indicates the actual size of the canvas, which is not visible to us
  • Canvas.style. width/canvas.style.height indicates the final size of the canvas output to the browser that we can see
  • To solve the problem of linear fuzzy after scaling see (solve the problem of canvas drawing fuzzy) [segmentfault.com/a/119000000…].

Prepare a canvas

<canvas id="canvas" width="300" height="300"></canvas>
Copy the code

Initialize the default values

// Get the canvas object
const canvas = document.getElementById('canvas');
// Get the drawing environment
const context = canvas.getContext('2d');
// Set the speed
let speed = 0.1;
// Set radians
let rad = Math.PI*2/100;
Copy the code

Draw outer ring

function drawCircle() {
  context.save();
  // The path starts
  context.beginPath();
  // Set the line width
  context.lineWidth = 2;
  // Set stroke style
  context.strokeStyle = "#eee";
  Context. Arc (x, y, radius, start Angle, end Angle, clockwise/counterclockwise)
  context.arc(canvas.width / 2, canvas.height / 2.100 , 0.Math.PI*2.false);
  / / to draw
  context.stroke();
  // The path ends
  context.closePath();
  context.restore();
}
Copy the code

Draw the outer circle

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();
}
Copy the code

Start the animation

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

Add text prompt

function text(n){
  context.save();
  context.strokeStyle = "#409eff";
  // Set the font size and font
  context.font = "40px Arial";
  // Draw the font and specify the position
  context.strokeText(n.toFixed(0) +"%", canvas.width - 20, canvas.height + 20);
  context.restore();
}
Copy the code
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;
};
Copy the code

reference

Canvas implements a circular progress bar and displays numeric percentages