Pure CSS Circular Percentage Bar

Category: CSS & CSS3 , Loading | April 7, 2015
Author: afuersch
Views Total: 19,553
Official Page: Go to website
Last Update: April 7, 2015
License: MIT

Preview:

Pure CSS Circular Percentage Bar

Description:

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

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">
  <span>25%</span>
  <div class="slice">
    <div class="bar"></div>
    <div class="fill"></div>
  </div>
</div>

Change the size of the progress bar.

<div class="c100 p25 big">
  ...
</div>

<div class="c100 p25 small">
  ...
</div>

Change the color of the progress bar.

<div class="c100 p25 green">
  ...
</div>

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

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

22 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!

    Reply
  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.
    Steven

    Reply
  3. João Mendes

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

    Reply
  4. Bruno

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

    Reply
    1. Ivan

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

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

      Reply
      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.

        Reply
  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?

    Reply
  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…

    Reply
  7. FredGauld

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

    Reply

Leave a Reply