This is the second day of my participation in Gwen Challenge

In this article, I’ll show you how to create a circular animated progress bar using only HTML, CSS, and the Boostrap framework. I’ve designed more types of animation bars before, but this design is done in a completely modern way.

The animated circular progress bar is a statistical design that can be used on a variety of websites. It is primarily used to indicate the percentage of qualifications an individual has on a portfolio website or personal website. It is fully animated, that is, under normal conditions it has a percentage of zero, and then it will gradually reach a predetermined percentage. Different colors have been used to indicate percentages.

Circular animation progress bar using HTML and CSS

I use Html, CSS, and the Bootstrap framework to implement it. For this circular progress bar, you can pre-determine the percentage as required. This means that you can pre-determine the percentage of progress this animation will stop. In this case, I basically circled three progress markers and used a different color for each one.

The circular progress bar presents you with a beautiful and visually stunning way to display a statistic. In this program, three bars on a web page have different percentages, and when the page is refreshed, the circle graph is filled in to the percentile-based position. These progress bars are fully responsive to any device from tablet to phone.

Below, I’ll walk you through how to create this progress bar, along with the programming code to create any element. Below is the download method, where you can download the source code for this article.

Step 1: Create the structure of the progress bar

HTML code:

<! --Bootstrap Cdn link-->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">


<div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-6">
                <div class="progress blue">
                    <span class="progress-left">
                        <span class="progress-bar"></span>
                    </span>
                    <span class="progress-right">
                        <span class="progress-bar"></span>
                    </span>
                    <div class="progress-value">90%</div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="progress yellow">
                    <span class="progress-left">
                        <span class="progress-bar"></span>
                    </span>
                    <span class="progress-right">
                        <span class="progress-bar"></span>
                    </span>
                    <div class="progress-value">75%</div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="progress pink">
                    <span class="progress-left">
                        <span class="progress-bar"></span>
                    </span>
                    <span class="progress-right">
                        <span class="progress-bar"></span>
                    </span>
                    <div class="progress-value">60%</div>
                </div>
            </div>
        </div>
    </div>
Copy the code

The CSS code:

body{
    background-color: # 333;
    margin: 10%;
    margin-left: 30%;

}
Copy the code

Results:

Step 2: Design circles using CSS code

.progress{
    width: 150px;
    height: 150px;
    line-height: 150px;
    background: none;
    margin: 0 auto;
    box-shadow: none;
    position: relative;
}
.progress:after{
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 15px solid #f2f5f5;
    position: absolute;
    top: 0;
    left: 0;
}
.progress > span{
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}
.progress .progress-left{
    left: 0;
}
.progress .progress-bar{
    width: 100%;
    height: 100%;
    background: none;
    border-width: 15px;
    border-style: solid;
    position: absolute;
    top: 0;
}
.progress .progress-left .progress-bar{
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}
.progress .progress-right{
    right: 0;
}
.progress .progress-right .progress-bar{
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    animation: loading-1 1.8 s linear forwards;
}
.progress .progress-value{
    width: 100%;
    height: 100%;
    font-size: 24px;
    color: rgb(250.245.245);
    text-align: center;
    position: absolute;
}
Copy the code

Results:

Step 3: Add the loading animation to the progress bar

@keyframes loading-1{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg); }}@keyframes loading-2{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(144deg);
        transform: rotate(144deg); }}@keyframes loading-3{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg); }}@keyframes loading-4{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(36deg);
        transform: rotate(36deg); }}@keyframes loading-5{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(126deg);
        transform: rotate(126deg); }}Copy the code

Results:

The animations are already working but we can’t see them because they’re all white.

Step 4: Add additional colors to make the loading animation clearer

.progress.blue .progress-bar{
    border-color: #26abfd;
}
.progress.blue .progress-left .progress-bar{
    animation: loading-2 1.5 s linear forwards 1.8 s;
}
.progress.yellow .progress-bar{
    border-color: #fdc426;
}
.progress.yellow .progress-left .progress-bar{
    animation: loading-3 1s linear forwards 1.8 s;
}
.progress.pink .progress-bar{
    border-color: #f83754;
}
.progress.pink .progress-left .progress-bar{
    animation: loading-4 0.4 s linear forwards 1.8 s;
}
Copy the code

Results:

Hopefully, you learned how to do that. If you have any difficulties, let me know in the comments.

Download the source code

Concern public number free download

Focus on wechat public number [la la la want biu point what] reply [circular animation progress bar] free access

More related

  • HTML/CSS based on the brave rabbit crazy run small game
  • Simple snow effects with HTML
  • Java backgammon game contains free source code

More blogs and contact information are available here: gitee.com/haiyongcsdn…

Give me a star if you can

And finally, don’t forget ❤ or 📑