CSS3 circular progress bar animation effect
The CSS3 circular progress bar animation effect is a circular percentage progress bar animation effect implemented by CSS3 SVG, which can be used to demonstrate skill mastery and proficiency.
body{background-color: #fff}
@-webkit-keyframes load {
0% {
stroke-dashoffset: 0;
}
}
@keyframes load {
0% {
stroke-dashoffset: 0;
}
}
.progress {
position: relative;
display: inline-block;
padding: 0;
text-align: center;
}
.progress > li {
display: inline-block;
position: relative;
text-align: center;
color: #93A2AC;
font-family: Lato;
font-weight: 100;
margin: 2rem;
}
.progress > li:before {
content: attr(data-name);
position: absolute;
width: 100%;
bottom: -2rem;
font-weight: 400;
}
.progress > li:after {
content: attr(data-percent);
position: absolute;
width: 100%;
top: 3.7rem;
left: 0;
font-size: 2rem;
text-align: center;
}
.progress svg {
width: 10rem;
height: 10rem;
}
.progress svg:nth-child(2) {
position: absolute;
left: 0;
top: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.progress svg:nth-child(2) path {
fill: none;
stroke-width: 25;
stroke-dasharray: 629;
stroke: #fff;
opacity: .9;
-webkit-animation: load 10s;
animation: load 10s;
}
</style>
All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article
![HTML5 css3 progress bar countdown animation special effects code [recommended]_html5 tutorial skills](http://files.jb51.net/file_images/game/201603/20160308161233.jpg)
HTML5 css3 progress bar countdown animation special effects code [recommended]_html5 tutorial skills
16 May 2016
The editor below will share with you an HTML5 css3 progress bar countdown animation special effects code [recommended]. Hope it helps everyone. Let’s follow the editor and take a look.
How to use css3 to achieve bar progress bar effect (complete code attached)
27 Sep 2018
When playing music and videos, you can not only check the playback time directly, but also check the playback time by observing the progress bar. Observing the progress bar will tell the user more intuitively how long it will take to end, so the progress bar is a very Practical special effects.
How to achieve the circular progress bar effect? Code example to implement circular progress bar effect using css3
27 Sep 2018
Today I will introduce to you another form of progress bar: circular progress bar. This kind of progress bar is suitable for pages when the page is loading and ring timers.
How to implement a circular progress bar in css3? Implementation of circular progress bar in css3
20 Oct 2018
Today’s article will introduce to you the implementation method of CSS3 circular progress bar. Interested friends can take a look.
Use css3 to implement circular progress bar
13 Mar 2017
When developing a WeChat applet, I encountered the need for a circular progress bar. Drawing with canvas is troublesome: 1. In order to achieve adaptation on different screens, the size of the progress bar must be dynamically calculated; 2. In the mini program, the canvas has the highest level and is not easy to expand. But using cs...
19 Dec 2017
When developing a WeChat applet, I encountered the need for a circular progress bar. This article mainly introduces examples of using css3 to implement circular progress bars. The detailed code is compiled here, which is of great practical value. Friends in need can refer to it. I hope it can help everyone.
How to make progress bar animation effect diagram in ppt. Tutorial on setting progress bar animation effect in ppt
27 Aug 2024
WPS office software is an office software that friends are very familiar with. In many cases, it can also create slides. If we want to make the slide content less monotonous, we can design an animated progress bar in the slide, but How should we set it up? Next, the editor will talk about the specific steps. If you are interested, let’s take a look. Production method 1. First create a new slide and insert a [rectangle]. 2. Adjust the rectangle to the same size as the slide page. 3. Then click [Insert], select [Shape], and then select to insert [Rounded Rectangle]. 4. Insert a rounded rectangle above the slide, adjust the rounded arc of the rounded rectangle, and adjust the rounded arc to the maximum. 5. Then select the rounded rectangle and click [Fill
How to implement a circular progress bar using css3
25 Jun 2018
This article mainly introduces examples of using css3 to implement circular progress bars. The detailed code is compiled here, which is of great practical value. Friends in need can refer to it.
Examples of how to implement circular progress bar animation on canvas
27 Dec 2017
This article mainly introduces the relevant information about realizing circular progress bar animation in canvas. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.
Hot Tools
jQuery+Html5 realizes beautiful confession animation code
jQuery+Html5 implements beautiful confession animation code, the animation effect is great, a must-have for programmers to confess!
Couple's romantic confession js special effects code
JS special effects code for couples' romantic confession. Such special effects can be used on wedding photography websites or placed on personal websites. It is also a good special effect. PHP Chinese website recommends downloading!
Simple js love confession artifact
Simple native js love confession artifact
Bunker's html5 particle animation expressive effects
Bunker's html5 particle animation expression special effects code, the animated special effects text can be changed in the code, you can make a page where you can customize text input, it should be very popular, this HTML5 special effect is very beautiful.
jQuery responsive background login interface template
jQuery responsive backend login interface template html source code. The login page uses jquery to verify the form and determine whether the username and password meet the requirements. Usually the login page is a page that must be used on corporate websites or mall websites. Responsive backend pages, When the browser zooms in or out, the background will resize the image according to the browser! PHP Chinese website recommends downloading!