Animated Circular progress bar using Html and CSS

Today in this blog you’ll learn how to create a Responsive Circular Progress Bar using HTML CSS & Bootstrap.
The circular progress bars present you with a beautiful and visually compelling way to showcase a single statistic. In this program [Circul…

Today in this blog you’ll learn how to create a Responsive Circular Progress Bar using HTML CSS & Bootstrap.
The circular progress bars present you with a beautiful and visually compelling way to showcase a single statistic. In this program [Circular Progress Bar], there are three bars on the webpage with different percent, and when you refresh the page, the circle graph fills to the percentage-based location. These bars are fully responsive to any device like a tablet, mobiles, etc.
Alt Text

In the case of this circular progress bar, you can pre-determine the percentage as needed. This means that you can pre-determine the percentage of progress this animation will stop. In this case, I have basically made a circle of three signs of progress and used different colors for each of them.

If you like this responsive circular bar and want to get source codes then you can easily get it from the download link.

HTML Code:


<!--Bootstrap Cdn link-->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/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>

CSS Code:

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

}

.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.8s linear forwards;
}
.progress .progress-value{
    width: 100%;
    height: 100%;
    font-size: 24px;
    color: rgb(250, 245, 245);
    text-align: center;
    position: absolute;
}
.progress.blue .progress-bar{
    border-color: #26abfd;
}
.progress.blue .progress-left .progress-bar{
    animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
    border-color: #fdc426;
}
.progress.yellow .progress-left .progress-bar{
    animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar{
    border-color: #f83754;
}
.progress.pink .progress-left .progress-bar{
    animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar{
    border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar{
    animation: loading-5 1.2s linear forwards 1.8s;
}
@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);
    }
}
@media only screen and (max-width: 990px){
    .progress{ margin-bottom: 20px; }
}

Print Share Comment Cite Upload Translate
APA
Foolish Developer | Sciencx (2024-03-29T06:58:38+00:00) » Animated Circular progress bar using Html and CSS. Retrieved from https://www.scien.cx/2021/05/12/animated-circular-progress-bar-using-html-and-css/.
MLA
" » Animated Circular progress bar using Html and CSS." Foolish Developer | Sciencx - Wednesday May 12, 2021, https://www.scien.cx/2021/05/12/animated-circular-progress-bar-using-html-and-css/
HARVARD
Foolish Developer | Sciencx Wednesday May 12, 2021 » Animated Circular progress bar using Html and CSS., viewed 2024-03-29T06:58:38+00:00,<https://www.scien.cx/2021/05/12/animated-circular-progress-bar-using-html-and-css/>
VANCOUVER
Foolish Developer | Sciencx - » Animated Circular progress bar using Html and CSS. [Internet]. [Accessed 2024-03-29T06:58:38+00:00]. Available from: https://www.scien.cx/2021/05/12/animated-circular-progress-bar-using-html-and-css/
CHICAGO
" » Animated Circular progress bar using Html and CSS." Foolish Developer | Sciencx - Accessed 2024-03-29T06:58:38+00:00. https://www.scien.cx/2021/05/12/animated-circular-progress-bar-using-html-and-css/
IEEE
" » Animated Circular progress bar using Html and CSS." Foolish Developer | Sciencx [Online]. Available: https://www.scien.cx/2021/05/12/animated-circular-progress-bar-using-html-and-css/. [Accessed: 2024-03-29T06:58:38+00:00]
rf:citation
» Animated Circular progress bar using Html and CSS | Foolish Developer | Sciencx | https://www.scien.cx/2021/05/12/animated-circular-progress-bar-using-html-and-css/ | 2024-03-29T06:58:38+00:00
https://github.com/addpipe/simple-recorderjs-demo