Pure CSS Circular Percentage Bar

Category: CSS & CSS3 , Loading | April 7, 2015
Author: afuersch
Views Total: 11,217
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>
  • Alex Furr

    Looks great and got it working easily. Could you show how make the div clickable i.e direct to a page. Adding around any parts seems to mess things up pretty badly, probably due to the existing CSS rules.
    Thank you
    Alex

    • Alex Furr

      Ignore previous comment its working 🙂

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

    • Steven Mould

      could you share the code ?

  • Its so simple and helpful

  • 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

  • Jonathan Annett
  • João Mendes

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

  • bruno

    otimo, muito bom, ajudou demais

  • Bruno

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

    • Ivan

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

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

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

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

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

    • Can you update a jsfiddle to show what you tried, so that it is easy to help you further.

  • FredGauld

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

  • Minh Nhật Phan

    Awesome, Thank you, 🙂