Circular Progress Bar using only HTML and CSS

Circular Progress Bar is currently used on many websites. The progress bar circular is the most popular for arranging any information nicely through animation. There are many types of progress bars, and the circle is one of them.

Circular Progress Bar css

This type of design is most commonly seen in e-commerce websites or various types of business websites. If you are a beginner and want to know how to create a Circular Progress Bar using only HTML and CSS then this tutorial is for you.

There are many such designs on the internet but most of the designs are made by JavaScript or JQuery. However, this circle progress bar CSS has been created entirely with HTML and CSS.

For this type of design, a circle has been created with a slightly thicker border. Color animation is added to this border. The whole circle is taken as the handed person. In this Circular Progress Bar, you can play border animation up to the desired percentage.

Circular Progress Bar

I have already shared the design of much Circular Progress Bar. But in all those cases I used JQuery or JavaScript.

Below I have given a preview that will help you to know how it works. Here you will find all the necessary step-by-step tutorials. If you are a beginner, be sure to follow the tutorials.

However, if you only want to download the source code, use the download button at the bottom of the article.

See the Pen Circular Progress Bar using HTML CSS by Raj Template (@RajTemplate) on CodePen.


As you can see above, this is a simple pure CSS Circular Progress Bar. There are some spaces in the middle of this design where the percentage number can be found. 

How to Make a Circular Progress Bar in HTML

To create this radial progress bar you must have some basic idea about HTML CSS. Under normal circumstances, Animation Zero will remain. 

When you load the webpage, this color animation will reach the meaning you set from zero. Here I have used 75%. You can use any value you like. 

1. Make a circle on the webpage

First, you need to create a basic structure of the progress bar. Created the structure with the following HTML and then designed it with CSS.


<div class="circle-wrap">
  <div class="circle">
 
  </div>
</div>

I have designed the webpage with the following css. Light blue is used in the background of the webpage here.

body {
  font-family: "Roboto", sans-serif;
  background:#d2eaf1;
}

Now I have designed the circle. This width: 150px, height: 150px has been used and border-radius: 50% has been used for rounding. White color has been used in the background of this circle.

.circle-wrap {
  margin: 150px auto;
  width: 150px;
  height: 150px;
  background: #fefcff;
  border-radius: 50%;
  border: 1px solid #cdcbd0;
}


Make a circle on the webpage

2. Half of the Circular progress bar

This step is very important. I am first trying to explain to you how to create this Circular Progress Bar.


First I made a circle. Then I divided him into two parts. I will add background color animation separately for those two parts. The percentage of this color will be controlled by the degree.

After adding all the animations, one more small circle has been created in this big circle. Since the size of this new circle is a bit smaller. This will create a border of the circle in which we can see the animation.


Now I've added color to the first half of that circle. How many places this color can be seen is determined by clip: rect (0px, 75px, 150px, 0px).


<div class="mask half">
    <div class="fill"></div>
</div>


.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}
 
.mask .fill {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #227ded;
}


Circular progress bar

3. The other half of the Circular Progress Bar

Now we have to make the other half part. How much color can be seen in this part too is determined by clip: rect (0px, 150px, 150px, 75px)

Then I added animation and activated the animation with @keyframes. There is a time limit of 3 seconds for the animation


We know that a circle is formed by 360. Since here we have divided the CSS circle progress bar into two parts, so each part is 180 degrees. 

Here we have set a 135-degree animation for each part using Transform. So it will be 270 degrees for the total circle. Here I want to increase the animation to 75% so I have used 270 degrees.

(360/100) * 75 = 270


<div class="mask full">
   <div class="fill"></div>
</div>


.circle-wrap .circle .mask {
  clip: rect(0px, 150px, 150px, 75px);
}
 
.mask.full,
.circle .fill {
  animation: fill ease-in-out 3s;
  transform: rotate(135deg);
}
  
@keyframes fill{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(135deg);
  }
}


Circular Progress Bar using only HTML

4. Add a percentage number to the Progress Bar

Now if we do this last step, we will create this Circular Progress Bar. Here I will make one more small circle and arrange to see the percentage number.

First I added numbers using HTML. Then his background is converted to a circle. The width of this small circle: 122px, height: 122px, and border-radius: 50% have been used to make it round.


<div class="inside-circle"> 75% </div>


.circle-wrap .inside-circle {
  width: 122px;
  height: 122px;
  border-radius: 50%;
  background: #d2eaf1;
  line-height: 120px;
  text-align: center;
  margin-top: 14px;
  margin-left: 14px;
  color: #1e51dc;
  position: absolute;
  z-index: 100;
  font-weight: 700;
  font-size: 2em;
}

Circular Progress Bar using only HTML and CSS

Hopefully from this tutorial, you have learned how to create Circular Progress Bar using CSS. If there is any difficulty in making it using the above code then use the button below. Please comment on how you like this CSS Circular Progress Bar.

In the meantime, I have created many types of circle progress bars using JavaScript. You can see those designs.







Post a Comment

4 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. Hi,
    Thanks for a nice work. I actually added an event listener to start animation only when the element is scrolled in sight.
    How would I need to go about if I wanted to have two concentric circles (i.e. on top of each other) with different deg-values and animated simultaneously?

    ReplyDelete
  2. Hello , Can you guide me that how can i increase the size of blue bar?

    ReplyDelete
  3. Hello -
    Would you know what changes to your code would be needed to make the circular progress bar adapt to the percentage. i.e. to make the circular bar follow the percent number (for example if 45% is inserted in the html instead of 75% or any other percentage) Thank you

    ReplyDelete
  4. Very helpful article! I used it together with spliderjs

    ReplyDelete