This is the 19th day of my participation in the August Wenwen Challenge.More challenges in August

preface

In real development, the circular progress bar is a very common component, especially in the management of background data statistics pages or some tasks that require users to wait. But a lot of times we use off-the-shelf components, but we never do it by hand.

In fact, the circular progress bar is not very difficult to implement, next I will take you step by step to achieve it!

If you’re not familiar with SVG, take a look at the SVG tutorial in my column: Jump to SVG tutorial

Implementation effect

The principle of

Use stroke-Dasharray and stroke-dashoffset attributes to perform an offset mismatch on the display of stroke. Set stroke-da Sharrary to the circumference of the circle. In other words, the distance of each solid line is one circle. Then the stroke-Dashoffset property is used to offset the lines to achieve the progress bar effect.

If you are not sure about these two attributes, read onFront end will know will learn | SVG see this article is enough (13)This is important for your subsequent writingSVGAnimation helps!

Code is used to implement

Code out the basic style

Start by creating an SVG canvas and drawing a simple circle. As the basis for a circular progress bar.

<svg>
    <circle cx="80" cy="80" r="50" fill="none" stroke-width="8" stroke="#7C83FD"></circle>
</svg>
Copy the code

We bind a class to circle and set stroke-Dasharray and stroke-dashoffset to the total length of the circle. We also put some properties inside the circle tag in the class. Make the circle tag look less complicated.

<circle class="circle" cx="80" cy="80" r="50" fill="none" stroke-width="8"></circle>
Copy the code
.circle {
    fill: none;
    stroke: #7C83FD;
    stroke-width: 8;
    stroke-dasharray: 314;
    stroke-dashoffset:314;
}
Copy the code
Add animation effects

Create a frame animation function circle, set stroke-dashoffset to 0, and bind it to the Circle class.

.circle {
    fill: none;
    stroke: #7C83FD;
    stroke-width: 8;
    stroke-dasharray: 314;
    stroke-dashoffset:314;
    animation: circle 3s infinite;
}
@keyframes circle {
    100%{
        stroke-dashoffset:0; }}Copy the code

At this point, we can say that the loop progress bar effect is half finished!

Let’s optimize it by adding stroke-linecap: round; Round the incision to make it look more comfortable.

Rotate the circle to 12 o ‘clock and add transform=”rotate(-90 80 80) “to the circle TAB.

This line of code is invalid if you add it to your CSS. If you want to adjust in CSS, you need to use transform-origin and transform-box to adjust the rotation center of the graphics.

transform:rotate(-90deg);
transform-origin: center;
transform-box:fill-box;
Copy the code

Add the text TAB to show the percentage effect of the circular progress bar in the center of the circle. Bind a text class to the number label for subsequent control display of the ring progress bar value.

<svg>
    <circle class="circle" cx="80" cy="80" r="50" transform="rotate(-90 80 80)"></circle>
    <text x="80" y="85" fill="#6b778c" text-anchor="middle">
        <tspan class="text">0</tspan><tspan class="percent">%</tspan>
    </text>
</svg>
Copy the code
.text{
    font-size: 20px;
}
.percent{
    font-size: 10px;
}
Copy the code

Code the interaction

Remove the circle frame animation function, where we don’t need CSS to control it, and add JavaScript code that allows us to control the progress of the circle bar.

First, define a variable with a circumference and assign it a value of 314, which will be used in our subsequent calculations to get the circle figure in the SVG canvas and the number label in the text.

let progressLen=314;
const textDom=document.getElementsByClassName('text') [0];
const circleDom=document.getElementsByClassName('circle') [0];
Copy the code

Define a setPercent function that sets the percentage of the ring bar.

setPercent=(num) = >{
    if(num>100) return;
    circleDom.style['stroke-dashoffset']=progressLen-(progressLen/100)*num;
    textDom.innerHTML=num;
}
Copy the code

After loading the page, let the ring load from 0 to 100%. Add the following code to the bottom line of the script tag, meaning that the progress of the ring bar is updated every 150 milliseconds. The progress percentage = current progress value + random value.

let i=0;
setInterval(() = >{
    i+=Math.floor(Math.random()*5);
    if(i>=100)i=100;
    setPercent(i);
},250)
Copy the code

Add transition to the circle class: all 1s; Give the stroke-Dashoffset attribute a transition effect when updating the value to make the process less abrupt.

The last

This article takes you from zero implementation to a circular progress bar, using SVG for development implementation. We can also incorporate this circular animation into buttons, or hover balls as a display, and combine it with other components for a better interactive experience. I hope you can learn from it and write better and more cool animation effects.

😉 If you found this article helpful please leave a like 😉

Related articles recommended

Button type progress bar for front button module

The ripple effect of the front button component