Example of creating circular scrolling progress bar animation using CSS3

theme

Today I will teach you how to create a circular scrolling progress bar animation using CSS3. It will be easy to learn! So, what exactly is it? Don’t worry, I have shared a blog about how to achieve progress bar effects with CSS before, "CSS achieves progress bar and order progress bar", but that blog only produced the effect, and there was no animation effect. Because I was reviewing for the final exam at the time, I saved the time cost of making animations. So, let’s realize all kinds of effects together today!

content

Let’s take a look at the renderings first, which will increase our interest in learning:

Okay, I will explain it from top to bottom according to this picture. Since the first and second effects have been introduced in the blog "CSS Progress Bar and Order Progress Bar", here I will focus on the animation. The circular effect is the key point, and I will explain it in detail.

The first effect:

HTML structure:

<div id="progress">
      <span></span>
</div>

CSS style:

#progress{
            width: 50%;
            height: 30px;
            border:1px solid #ccc;
            border-radius: 15px;
            margin: 50px 0 0 100px;
            overflow: hidden;
            box-shadow: 0 0 5px 0px #ddd inset;
        }
        #progress span {
            display: inline-block;
            width: 100%;
            height: 100%;
            background: #2989d8; /* Old browsers */
            background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */
            background: -webkit-gradient(linear, left bottom, right top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* Chrome 10+, Safari 5.1+ */
            background: -o-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* Opera 11.10+ */
            background: -ms-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* IE10+ */
            background: linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
            background-size: 60px 30px;
            text-align: center;
            color:#fff;
            -webkit-animation:load 3s ease-in;
        }
        @-webkit-keyframes load{
            0%{
                width: 0%;
            }
            100%{
                width:100%;
            }
        }

You can see that this kind of progress bar animation is actually the easiest to implement. Just set the default width percentage and the width percentage at 100% in the animation according to the specific progress percentage. For example, if I want to achieve a 70% progress bar animation effect, I only need to modify two places:

#progress span{
    width: 70%;
}
@-webkit-keyframes load{
      0%{
        width: 0%;
      }
    100%{
        width:70%;
      }
}

Second effect:

HTML structure:

<div id="progressBar">
      <!-- Progress Bar -->
      <div>
        <span></span>
      </div>
      <!-- Five circles -->
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
 </div>

CSS style:

#progressBar{
            width: 80%;
            height: 50px;
            position: relative;
            margin: 50px 0 0 100px;
        }
        #progressBar div{
            width: 100%;
            height: 10px;
            position: absolute;
            top:50%;
            left: 0;
            margin-top:-20px;
            background: #ccc;
        }
        #progressBar div span {
            position: absolute;
            display: inline-block;
            background: green;
            height: 10px;
            width: 100%;
            -webkit-animation:bgLoad 5.5s linear;
        }
        @-webkit-keyframes bgLoad{
            0%{
                width: 0%;
            }
            18.18%,27.27%{
                width:25%;
            }
            45.45%,54.54%{
                width: 50%;
            }
            72.72%,81.81%{
                width: 75%;
            }
            100%{
                width:100%;
            }
        }
        #progressBar>span{
            position: absolute;
            top:0;
            margin-top: -10px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #ccc;
            margin-left: -20px;
            color:#fff;
        }
        @-webkit-keyframes circleLoad_1{
            0%,66.66%{
                background: #ccc;
            }
            100%{
                background:green;
            }
        }
        @-webkit-keyframes circleLoad_2{
            0%,83.34%{
                background: #ccc;
            }
            100%{
                background:green;
            }
        }
        @-webkit-keyframes circleLoad_3{
            0%,88.88%{
                background: #ccc;
            }
            100%{
                background:green;
            }
        }
        @-webkit-keyframes circleLoad_4{
            0%,91.67%{
                background: #ccc;
            }
            100%{
                background:green;
            }
        }
        #progressBar span:nth-child(2){
            left: 0%;background:green;
        }
        #progressBar span:nth-child(3){
            left: 25%;background:green;
            -webkit-animation:circleLoad_1 1.5s ease-in;
        }
        #progressBar span:nth-child(4){
            left: 50%;background:green;
            -webkit-animation:circleLoad_2 3s ease-in;
        }
        #progressBar span:nth-child(5){
            left: 75%;background:green;
            -webkit-animation:circleLoad_3 4.5s ease-in;
        }
        #progressBar span:nth-child(6){
            left: 100%;background:green;
            -webkit-animation:circleLoad_4 6s ease-in;
        }

As you can see, the animation itself is actually very simple and easy to understand. It mainly involves calculating the duration of the animation. Since this animation effect is only executed once, you can actually use the animation delay time to ensure that each animation starts at a specified time point. However, for looping or multiple animation effects, the delay is not flexible, so the duration is still used here to control the execution time of the animation.

For this order progress bar, I set it to take 1 second to move a section, and then pause for 0.5 seconds at each dot, and this 0.5 seconds is the duration of the animation of the corresponding dot. But I have to emphasize again that this is a single animation. If you want to implement a looping animation, you still have to make adjustments. The duration of all animations must be the same, otherwise the loop will be messy. The change of time will also affect the change of animation keyframes. The following is an explanation of the animation time of the first segment and the second circle:

First, the animation duration of the thin strip is calculated by:

4 segments x 1 second + 3 dots in the middle x 0.5 seconds = 5.5 seconds

The next step is to calculate the time distribution of the key frames of the long and thin strip animation. Assuming that each portion is 0.5 seconds, there are a total of 11 portions, 2 portions for each small segment, and 1 portion for each dot. Divide 100% by 11, and you can get that each portion is approximately 9.09%. The next step is to allocate time, which is simple and I won't say much about it.

Next, when the thin strip completes the first segment of the animation effect and reaches the second dot, it pauses for 0.5 seconds, and this 0.5 seconds is the animation time of the second dot, so the animation duration of the second dot is:

Wait for the strip to finish executing 1 segment x 1 second + its own animation completion time x 0.5 seconds = 1.5 seconds

Use the same method to calculate the time for each portion and then allocate it. Similarly, other animation effects are similar and will not be elaborated on here.

The third effect:

Today I will focus on this effect. First of all, when someone asks you if you can make a circular progress bar effect, if it is a static complete circular progress bar, then it is very simple:

.circleprogress{
    width: 160px;
    height: 160px;
    border:20px solid red;
    border-radius: 50%;
}

.circleprogress{
    width: 160px;
    height: 160px;
    border:20px solid red;
    border-left:20px solid transparent;
    border-bottom:20px solid transparent;
    border-radius: 50%;
}

Then I would still say, this is not difficult. But what if they are not exactly multiples of 45 degrees?

OK, let's set up a 200x200 square first, and then we'll complete our effect in it:

.circleProgress_wrapper{
    width: 200px;
    height: 200px;
    margin: 50px auto;
    position: relative;
    border:1px solid #ddd;
}

Next I'll put two more rectangles in this container, each taking up half of the space:

<div class="circleProgress_wrapper">
        <div class="wrapper right">
            <div class="circleProgress rightcircle"></div>
        </div>
        <div class="wrapper left">
            <div class="circleProgress leftcircle"></div>
        </div>
 </div>

.wrapper{
    width: 100px;
    height: 200px;
    position: absolute;
    top:0;
    overflow: hidden;
}
.right{
    right:0;
}
.left{
    left:0;
}

Here, we would like to emphasize that overflow:hidden; of .wrapper plays a key role. Overflow hiding is set for both rectangles, so when we rotate the circle inside the rectangle, the overflow part will be hidden, so that we can achieve the desired effect.

As we can see from the HTML structure, there is a circle inside each of the left and right rectangles. Let’s talk about the right semicircle first:

.circleProgress{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    top:0;
}
.rightcircle{
    border-top:20px solid green;
    border-right:20px solid green;
    right:0;
}

As you can see, the effect has come out. In fact, it was originally a semicircular arc, but because we set the top border and right border, half of the top border overflowed and was hidden, so we can restore it by rotating it:

.circleProgress{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    top:0;
    -webkit-transform: rotate(45deg);
}

So you can achieve a progress bar of any proportion by just rotating it at the angle you want. Next, implement the left half arc to make it a full circle:

.leftcircle{
    border-bottom:20px solid green;
    border-left:20px solid green;
    left:0;
}

Next, we need to make it move. The principle is that we first rotate the right semicircle arc 180 degrees, and then rotate the left semicircle arc 180 degrees. In this way, the two semicircles disappear because they overflow one after another, so it looks like the progress bar is rolling again:

.rightcircle{
            border-top:20px solid green;
            border-right:20px solid green;
            right:0;
            -webkit-animation: circleProgressLoad_right 5s linear infinite;
        }
        .leftcircle{
            border-bottom:20px solid green;
            border-left:20px solid green;
            left:0;
            -webkit-animation: circleProgressLoad_left 5s linear infinite;
        }
        @-webkit-keyframes circleProgressLoad_right{
            0%{
                -webkit-transform: rotate(45deg);
            }
            50%,100%{
                -webkit-transform: rotate(225deg);
            }
        }
        @-webkit-keyframes circleProgressLoad_left{
            0%,50%{
                -webkit-transform: rotate(45deg);
            }
            100%{
                -webkit-transform: rotate(225deg);
            }
        }

Of course, we only need to adjust the angle to achieve the reverse effect:

.circleProgress{
            width: 160px;
            height: 160px;
            border:20px solid transparent;
            border-radius: 50%;
            position: absolute;
            top:0;
            -webkit-transform: rotate(-135deg);
        }
        @-webkit-keyframes circleProgressLoad_right{
            0%{
                -webkit-transform: rotate(-135deg);
            }
            50%,100%{
                -webkit-transform: rotate(45deg);
            }
        }
        @-webkit-keyframes circleProgressLoad_left{
            0%,50%{
                -webkit-transform: rotate(-135deg);
            }
            100%{
                -webkit-transform: rotate(45deg);
            }
        }

OK, the next step is to get the final effect. As we saw at the beginning, it is a bit like the effect when we use 360 Guard to clean up garbage, but of course it is not very similar:

.circleProgress_wrapper{
            width: 200px;
            height: 200px;
            margin: 50px auto;
            position: relative;
            border:1px solid #ddd;
        }

        .wrapper{
            width: 100px;
            height: 200px;
            position: absolute;
            top:0;
            overflow: hidden;
        }
        .right{
            right:0;
        }
        .left{
            left:0;
        }
        .circleProgress{
            width: 160px;
            height: 160px;
            border:20px solid rgb(232, 232, 12);
            border-radius: 50%;
            position: absolute;
            top:0;
            -webkit-transform: rotate(45deg);
        }
        .rightcircle{
            border-top:20px solid green;
            border-right:20px solid green;
            right:0;
            -webkit-animation: circleProgressLoad_right 5s linear infinite;
        }
        .leftcircle{
            border-bottom:20px solid green;
            border-left:20px solid green;
            left:0;
            -webkit-animation: circleProgressLoad_left 5s linear infinite;
        }
        @-webkit-keyframes circleProgressLoad_right{
            0%{
                border-top:20px solid #ED1A1A;
                border-right:20px solid #ED1A1A;
                -webkit-transform: rotate(45deg);
            }
            50%{
                border-top:20px solid rgb(232, 232, 12);
                border-right:20px solid rgb(232, 232, 12);
                border-left:20px solid rgb(81, 197, 81);
                border-bottom:20px solid rgb(81, 197, 81);
                -webkit-transform: rotate(225deg);
            }
            100%{
                border-left:20px solid green;
                border-bottom:20px solid green;
                -webkit-transform: rotate(225deg);
            }
        }
        @-webkit-keyframes circleProgressLoad_left{
            0%{
                border-bottom:20px solid #ED1A1A;
                border-left:20px solid #ED1A1A;
                -webkit-transform: rotate(45deg);
            }
            50%{
                border-bottom:20px solid rgb(232, 232, 12);
                border-left:20px solid rgb(232, 232, 12);
                border-top:20px solid rgb(81, 197, 81);
                border-right:20px solid rgb(81, 197, 81);
                -webkit-transform: rotate(45deg);
            }
            100%{
                border-top:20px solid green;
                border-right:20px solid green;
                border-bottom:20px solid green;
                border-left:20px solid green;
                -webkit-transform: rotate(225deg);
            }
        }

As you can see, there are just some animations that change the colors of different borders. You can practice it yourself! The main method is to use two rectangles to complete such a circular progress bar effect. Pay special attention to the overflow rule, which plays a key role.

Original link: https://www.cnblogs.com/jr1993/p/4677921.html

The above is the details of the example of using CSS3 to make a circular scrolling progress bar animation. For more information about CSS3 progress bar production, please pay attention to other related articles on 123WORDPRESS.COM!

<<: Detailed explanation of dynamic Christmas tree through JavaScript

>>: Detailed steps to install JDK and Tomcat in Linux environment

Detailed explanation of mysql permissions and indexes

Example of creating circular scrolling progress bar animation using CSS3

Detailed explanation of mysql permissions and indexes

Detailed explanation of non-primary key column overflow monitoring in MySQL tables

Detailed explanation of the implementation principles of call, apply, and bind in JavaScript

In-depth explanation of the locking mechanism in MySQL InnoDB

Solution for applying CSS3 transforms to background images

Why do code standards require SQL statements not to have too many joins?

Solution to the problem that the entry cannot be found when installing mysql5.7.18

Avoiding Problems Caused by Closures in JavaScript

Vue uses the method in the reference library with source code

Semanticization of HTML tags (including H5)

Recommend

Solve the problem that some configuration files in /etc are reset after the docker container is restarted

Detailed explanation of MYSQL large-scale write problem optimization

Some wonderful uses of URL objects in JavaScript

MySQL 5.7.21 winx64 free installation version configuration method graphic tutorial

A brief discussion on several ways to pass parameters in react routing

Introduction to commonly used MySQL commands in Linux environment

Use the Linux seq command to generate a sequence of numbers (recommended)

VM VirtualBox virtual machine mount shared folder

The principle and basic use of Vue.use() in Vue

Detailed explanation of compiling and installing MySQL 5.6 on CentOS and installing multiple MySQL instances

JavaScript uses canvas to draw coordinates and lines

MySQL installation and configuration method graphic tutorial (CentOS7)

Detailed examples of using JavaScript event delegation (proxy)

MySQL 5.6.23 Installation and Configuration Environment Variables Tutorial

Installation of mysql5.7 and implementation process of long-term free use of Navicate