Pure CSS Circular Percentage Bar without JS

It is a pure CSS circular progress bar which shows the percentage in the circular. There is no Javascript or graphics required to implement it on your website. You can see the demo and download the HTML/CSS and SASS files for implementation.

It is inspired with many jQuery plugins but developed with solely CSS for fast loading experience. It provides a smooth experience as any kind of jQuery or Javascript progress bar.

I am sure, You will love this really a nice percentage radial bar and you will never found this type of progress bar over the Github.

It also included the source code in LESS and transformed the SASS code into LESS for reuse or further development.

Browser Support of Percentage Circular Bar

If we talk about the browser support, It tested on all modern browsers and it displays correctly on them including the hover animations.

It runs smoothly on Firefox from version 4 and Chrome from version 14. As for IE concern, It works from IE 9 but without transition.

If we run it on safari, You will found that it works well from version 5.1. As for mobile browsers, The whole things work pretty well and look good.

How to Implement Circular bar with CSS Only

Let’s implement it on your website which is so easy because you only need to load the stylesheet circle.css which you can find in download source.

<link rel="stylesheet" href="css/circle.css">

Markup

The HTML markup structured for the display the circle is quite simple. We have a main div then the value inside the span tag. Next, we have few of child divs which allow adding the colorful percentage bar over the circle.

<div class="c100 p0 center">
    <span>0%</span>
    <div class="slice">
    	<div class="bar"></div>
    	<div class="fill"></div>
    </div>
</div>

Ok, remember this above code will not display any progress over the circle because if you notice the main div, you will see the class p0 which means zero value.

Now Let’s see we want to show 33% over the circle then the code will look this:

<div class="c100 p33 center">
    <span>33%</span>
    <div class="slice">
    	<div class="bar"></div>
    	<div class="fill"></div>
    </div>
</div>

You see, we only change the class p0 to p33. That’s it. Now if you want to change the size of the progress bar then you need to add a big or small class. Have a look the example.

<div class="c100 p35 big">
  ...
</div>
<div class="c100 p45 small">
  ...
</div>

Similar it also provides you to choose the favorite color (green, orange, dark) that matches with your site design.

<div class="c100 p50 green">
   <span>5%</span>
    <div class="slice">
    	<div class="bar"></div>
    	<div class="fill"></div>
    </div>
</div>

<div class="c100 p66 orange">
  ...
</div>

<div class="c100 p75 dark">
  ...
</div>

If you want more colors or sizes than you can easily customize its CSS file. The customization is easy and all you need to figure out the classes and change their values.