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
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
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