Pure CSS Circular Percentage Bar


Author: afuersch
Views Total: 298,006 views
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.

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">
  <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>

See also  Image Clip with Sliders using HTML CSS

Leave a Reply

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