DEV Community

Cover image for Animated Circular progress bar using Html and CSS
Foolish Developer
Foolish Developer

Posted on • Updated on

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 [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.

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

Related Post:

  1. Simple Footer Design Tutorial
  2. Make a Todo List using JavaScript
  3. Simple Stopwatch using JavaScript
  4. Skeleton Screen Loading Animation
  5. Javascript Age Calculator
  6. Random Password Generator with JavaScript
  7. Automatic Image Slider in Html, CSS
  8. Sidebar Menu Using HTML CSS

Top comments (4)

Collapse
 
grahamthedev profile image
GrahamTheDev

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
 
dannyengelman profile image
Danny Engelman • Edited

If you don't mind loading a native JavaScript Web Component,

you can use this HTML:

<script src="https://pie-meister.github.io/PieMeister-with-Progress.min.js"></script>

<progress-circle edge="grey">
    <progress value="75%" stroke="green">SEO</progress>
    <progress value="60%" stroke="orange">Social</progress>
    <progress value="65%" stroke="teal" edge="black">Maps</progress>
    <progress value="50%" stroke="orangered">Traffic</progress>
  </progress-circle>
Enter fullscreen mode Exit fullscreen mode

to create:

You have to add the SVG animation yourself,
unlicensed Web Component source code at: pie-meister.github.io/

Collapse
 
cristoferk profile image
CristoferK

cool!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.