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