The first effect

When a circular progress bar needs to be displayed in a project, you can use the following methods

  1. Import the component library. There is also a circular progress bar using Element UI, but the downside is that styles are hard to modify and components need to be introduced.

2 Importing Images

You can make the progress bar dynamic graph into GIF, directly imported into the project. Disadvantages: You can’t change the size of the progress, images load too much and take up space.

3 Use SVG to draw by hand

html:

<div class="circle"> <svg class="pro-svg"> <circle class="circle" cx="45" cy="45" r="44" fill="none" stroke-width="4" :stroke-dashoffset="loadingProgress" ></circle> </svg> </div> .circle { stroke: #fcb718; stroke-width: 4; stroke-dasharray: 275; stroke-linecap: round; }Copy the code

Parameters that

Cx: the position of the drawn center x from the parent element

Cy: the position of the drawn center y from the parent element

R: radius length

Fill: A solid circle?

Stroke-width: circular width

The following is the most important two parameters!!

Stroke-dasharray: pattern pattern representing the representation of line segments and gaps. If you just draw a progress bar and don’t really understand what the other forms mean. You can think of it as the circumference, you can think of it as the color of the circle at the bottom of the progress bar.

Stroke-dashoffset: specifies the distance between the dash mode and the start of the path. It’s simply an offset. If you simply draw a progress bar, use stroke-dasharray-.

The CSS to add

 transform: rotate(-180deg);
Copy the code

To adjust the starting direction of the wake up progress bar.

At this point, a complete progress bar is generated.

Let’s add the dynamic effects.

1 Use animation to add

animation: circle 3s 1; @keyframes circle {100% {stroke-dashoffset: 60; @keyframes circle {100% {stroke-dashoffset: 60; }}Copy the code

2 Use JS to dynamically add

this.intervalFlag = setInterval(() => { this.loadingProgress -= 3; if (this.loadingProgress <= 60) { clearInterval(this.intervalFlag); }}, 10); // stroke-dashoffset is dynamically bound to loadingProgress. The initial loadingProgress value is stroke-dashoffset. Set the timer to decrease as the time goes by.Copy the code

This gives you a circular progress bar