Pure CSS Percentage Circle With Animation

We have already posted a pure CSS radial progress bar, and here we will show you another way of making percentage circle with animation.

Our previous tutorial was built with gradient colors. Today I am going to demonstrate how to create an animated circle without gradient color and also it will animate page load.

The CSS Circles can easily created using pure CSS and HTML only. You don’t need to add any JavaScript or jQuery. It still supports manage modern browsers and can customize easily.

The percentage circle is good to use to present your skills. It allows users to know your skills quickly, and also it’s a great way to tell your users what you are providing and what service you will give to their customers.

How to Create a Percentage Circle with CSS

If we take a look at HTML, we will see it doesn’t require to write a large number of lines. We have circle wrapper and then it’s child div class name circle.

Next, we added two fill and mask div, and finally, we would have a div to add percentage number. Just like here.

<div class="circle-wrap">
  <div class="circle">
    
    <div class="mask full">
      <div class="fill"></div>
    </div>
   
    <div class="mask half">
      <div class="fill"></div>
    </div>
    
    <div class="inside-circle">
      70%
    </div>
    
  </div>

What we do with the wrapper is to set the width and height of the circle as per our need and add the background color which we want to see as fill. Also, border-radius should be added to make it rounded.

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

The mask and fill also have the same size of width and height as a wrapper. Also border-radius. The extra thing we will do here to add the position absolute.

.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}

For the mask, we are going to use clip CSS property and set recent values.

.circle-wrap .circle .mask {
  clip: rect(0px, 150px, 150px, 75px);
}

As for as fill, we need to do the same thing, but the value position will change, and the background color will be added. We will add the background color that we want to see as filled.

.circle-wrap .circle .mask .fill {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #9e00b1;
}
.circle-wrap .circle .mask.full,
.circle-wrap .circle .fill {
  animation: fill ease-in-out 3s;
  transform: rotate(126deg);
}

@keyframes fill {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(126deg);
  }
}

Finally, we need to do something with inside-circle to make it look good and perfect. OK, we do add the width and height, but we do set less width and height as compared to the wrapper so it should not fill out the whole circle.

Next, we will add border-radius, set background color white and do a few other stylings. Let have a look at the CSS blow.

.circle-wrap .inside-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;
  line-height: 130px;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  position: absolute;
  z-index: 100;
  font-weight: 700;
  font-size: 2em;
}

You Might Be Interested In:

Ashfaq Ahmed is a freelance WordPress developer and owner of codeconvey.com. I developed modern and highly interactive websites. I always focus on improving my development and design skills.

12 thoughts on “Pure CSS Percentage Circle With Animation”

  1. It was really very helpful. and easy to implement .

    Thank you

  2. On 100% it adds small gap between two halfs.

  3. What to change if i need to show different value of percentages here?

    • Hi!
      You need to update values of CSS clip property in the mask and fill selector according to your percentage.
      Look at the following:

      .circle-wrap .circle .mask {
        clip: rect(0px, 150px, 150px, 75px);
      }
      

      Similarly, keep the same values for fill selector.

  4. Hey, if you could point towards an example to change the precentage completion, I’m sure this tutorial would become exponentially better. As someone who’s not an expert with CSS, I tried changing the clip value for the mask selector but with no avail. Whites appear at different positions and I lost the shape of the circle

    • Hi CRice!
      You can calculate the masked values with respect to the size of the circle.

  5. In general a nice way.
    But your explanation about changing the percentage is really not good…
    An example would be much better.

    • Thanks for your feedback! We’ll write something better about circular progress bar with percentage in upcoming tutorials. Keep visiting us!

  6. how to add this percentage circle in cf7 with multistep (4 step) option

    • Not sure about the CF7 but you can give a try by using the CF style plugin.

  7. Hi, please could you set this for me so it’s 2/3rds the size & shows the percentage at 50% it’s too hard to work out , thank you 🙂

    • Hi Sam!
      You can update the percentage value in HTML structure like below:

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

      Then you need to update the CSS clip-path value to adjust the fill area according to your percentage value. You can do that in the following selector:

      .circle-wrap .circle .mask {
        clip: rect(0px, 150px, 150px, 75px);
      }
      

Comments are closed.