DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Circular Progress Bar using HTML and CSS
Shantanu Jana
Shantanu Jana

Posted on • Updated on

Circular Progress Bar using HTML and CSS

Circular Progress Bar is a popular web element that is mainly used on business or personal websites. If you want to create a circular progress bar using HTML and CSS, then this article will help you. Here I am going to show you how to make a simple CSS circle progress bar.

When you load the page, this animation will go from zero to your assigned meaning. A percentage of text is used here, but no animation is used in this text. It is made in a very simple way.

βœ… Watch Live Preview πŸ‘‰πŸ‘‰ Circular Progress Bar

In this article, I will show you step by step how I made this circular progress bar design.To make it, you need to have an idea about basic HTML and CSS.

Step 1: The basic structure of Circular Progress Bar

I have used HTML and CSS to create the basic structure of the Circular Progress Bar. I have created a small circle on the webpage.

The width and height of this circle are 150 px. The background color of the circle is white and margins are used to place it in the middle.

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

  </div>
</div>
Enter fullscreen mode Exit fullscreen mode
body {
  font-family: "Roboto", sans-serif;
  background:#d2eaf1;
}

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

The basic structure of Circular Progress Bar

Step 2: Half of the simple CSS circle progress bar

As I said before, the animation in this circle is divided into two parts. This means that the animation has been divided into two parts up to the customer value.

I have made the first part of those two parts. Width and height 150 have been used to make this animation equal in size to the Circular Progress Bar. Similarly, border-radius 50% has been used to make it round.

Here I have set the background-color to blue. If you want to play an animation in another color, you can use that color here.

<div class="mask half">
    <div class="fill"></div>
</div>
Enter fullscreen mode Exit fullscreen mode
.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;
}
Enter fullscreen mode Exit fullscreen mode

Half of the simple CSS circle progress bar

Step 3: The other half of the Circular Progress Bar

Now I have designed the other half of the Circular Progress Bar. I set the time to three seconds by adding animation here. This means that when this page is opened, the animation will take 3 seconds to reach the meaning you set from zero.

Here 135 degrees have been used using transform. This transform will determine where the animation will end in this circle.

➀ 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

You determine the value of this degree according to your needs. For example, if you want the animation of the Circular Progress Bar will be up to 80%. But for that, you have to use 144 degrees here. Lastly, I have implemented this animation using @keyframes.

<div class="mask full">
   <div class="fill"></div>
</div>
Enter fullscreen mode Exit fullscreen mode
.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);
  }
}
Enter fullscreen mode Exit fullscreen mode

The other half of the Circular Progress Bar

Step 4: Create a percentage in the Circular Progress Bar

Now I have added percentages in this circular progress bar. Although that percentage of animation is not added.

Added text using basic HTML and CSS code. I have used text-align: center and position: absolute to place the text in the middle of the Circular Progress Bar.

I used border-radius: 50% to make its background width and height 122 px and round. Here I have used font-size: 2em to make the size of the text smaller and larger.

<div class="inside-circle"> 75% </div>
Enter fullscreen mode Exit fullscreen mode
.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;
}
Enter fullscreen mode Exit fullscreen mode

Circular Progress Bar using HTML and CSS

Related Post:

  1. Responsive Footer HTML CSS
  2. Todo List using JavaScript
  3. Simple Stopwatch using JavaScript
  4. Javascript Age Calculator
  5. javaScript Password Generator
  6. Automatic Image Slider in Html CSS
  7. Sidebar Menu Using HTML CSS

As you can see in the picture above, now this CSS Circular Progress Bar is absolutely ready. Hope you find out from this article how I created this Circular Progress Bar using HTML and CSS.

You can visit my blog for more tutorials like this. 😊
https://www.foolishdeveloper.com/

Top comments (11)

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Alternatively, you could use a conic gradient: it would simplify the HTML and the CSS. At it can be animated with @property (although only on Chromium for now):

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
zodiapps profile image
Adam Alfredsson

That isn't true, it has still quite limited browser support.

developer.mozilla.org/en-US/docs/W...

Thread Thread
 
elijahtrillionz profile image
Elijah Trillionz

Double checked, you're correct

Collapse
 
wormius51 profile image
Eyal Hazor

This is great. I really appreciate the answer you gave here. I was looking at how to do this and I think I found a few ways. This one is the least hacky though. I appreciate the post here too. But I think your answer is better.

Collapse
 
ellaray7 profile image
Ellaray7

While I tried to design the progress bar It's giving error do you know why? sort de separation

Collapse
 
shantanu_jana profile image
Shantanu Jana Author
Collapse
 
ellaray7 profile image
Ellaray7

Thank you @shantanu

Collapse
 
rahulahire profile image
Rahul Ahire

I want to know that wouldn't it be easier to make a vector svg in Illustrator and then try to animate it with JavaScript?

Collapse
 
bryndille profile image
Bryndille1701

I would personally use something like Alvaro proposed, or a SVG element (see how the progress circle is made on the Twitter website, it's clever and easy to implement).

Collapse
 
t0nghe profile image
Tonghe Wang

Oh, thanks for the info. Let me go check out how twitter does it.

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!