DEV Community

loading...
Cover image for Animated Circular progress bar using Html and CSS

Animated Circular progress bar using Html and CSS

code_mystery profile image Foolish Developer ・3 min read

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>
Enter fullscreen mode Exit fullscreen mode

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; }
}
Enter fullscreen mode Exit fullscreen mode

Discussion (3)

Collapse
inhuofficial profile image
InHuOfficial

They look great! ❤️

Minor suggestion. For the progress number:

<div class="progress-value">60%</div>
Enter fullscreen mode Exit fullscreen mode

Swap it for a

<progress role=“progressbar”>
Enter fullscreen mode Exit fullscreen mode

element and add the relevant WAI-ARIA so that people with screen readers / assistive tech can use it too.

Relevant aria role and usage:
developer.mozilla.org/en-US/docs/W...

Progress element:
developer.mozilla.org/en-US/docs/W...

Collapse
chinmayghule profile image
Chinmay Ghule

If we had to look at the code we could've just went to GitHub or CodePen or any other place where your code is.

The purpose of creating an article here is to shortly explain how your code works and what tricks/techniques you used.

Collapse
cristoferk profile image
Forem Open with the Forem app