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;
}