How to Create CSS Percentage Circle

Author
In CSS Tutorial, Skills Bar Jan 12, 2017
CSS Percentage Circle

We have already posted about pure CSS radial progress bar, and here we will show you another way of making Percentage Circle. Our previous tutorial was built with gradient colors. Today I am going to demonstrate how to create animated percentage circle without gradient color used and also an animated circle on page load.

Today I am going to demonstrate how to create animated percentage circle without gradient color used and also an animated circle on page load.

The CSS Circles have created 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.

CSS Percentage Circle with CSS

If we take a look HTML, we will see it don’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 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 be changes, 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 wrapper so it should not fill out the whole circle. Next, we will add border-radius, set background color white and do few another styling. Let have a look 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; } 

Feedbacks 1

  1. Thanks for the tutorial, I would be interested to know how you could adapt this to have multiple percentages on the same page, I have tried but cannot figure it out.

    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *