Pure CSS Circular Percentage Bar

Category: CSS & CSS3 , Loading | April 7, 2015
Views Total:300,752 views
Official Page:Go to website
Last Update:April 7, 2015


Pure CSS Circular Percentage Bar


A pure CSS progress bar that shows progress bar with percentage in a circular bar view.

See Also:

How to use it:

Load the circle.css in the document’s head section.

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

Create a basic circular progress bar.

<div class="c100 p25">
  <div class="slice">
    <div class="bar"></div>
    <div class="fill"></div>

Change the size of the progress bar.

<div class="c100 p25 big">
<div class="c100 p25 small">

Change the color of the progress bar.

<div class="c100 p25 green">
<div class="c100 p25 orange">
<div class="c100 p25 dark">

You Might Be Interested In:

25 thoughts on “Pure CSS Circular Percentage Bar

  1. Medium Speed

    Thanks for the CSS! Is there a license for this code? I’ve written some JS to control the value so it can be used as a progress dial. Thanks!

  2. Steven Mould

    hi there … I sort of got mine to work apart from it doesn’t do it in a circle it does it in a square box 🙁 help please.

  3. João Mendes

    Thank you, it helped me a lot!
    But what is the function of the div class=”fill”

  4. Bruno

    Anyway to increase width of the ring? i would like to use it in a 50px size or less.

    1. Ivan

      .c100 {
      font-size: 50px !important;

      It work’s for ring size although it says font-size

      1. Bruno

        Ok, this modify the size for the whole circle. Not what I have asked.
        I figure I have to play with top and left, margin and width and height of splice or bar or fill. Thanks anyway.

  5. Harsha Motwani

    If i’m reducing the font-size to 30px for .c100 , then the filled area is getting distorted or clipped, any solution for that?

  6. inIA2010

    Is there any easy way to center everything. I put contents in a div and tried to center block it, but it remains constantly left justified…

  7. FredGauld

    HEY! THANKS a bunch! This is really helpful.
    Cheers from Montreal, Canada!

  8. Jeffrey Thompson

    I am currently developing a React project. Would you be interested if I refactored this into a pre-built React component?


Leave a Reply