Circle100 | Creating a Percentage Circle in CSS3

Circle100 is a pure css for creating a percentage circle, which is a good solution for displaying statistical data. In this tutorial, we will implement a percentage circle with some steps using Circle100.

View percentage circle demo

How to create a percentage circle using circle100?

1.Import css file

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

2.Create a div to display percentage circle

    <div class="c100 p55 big green">
      <span>55%</span>
      <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
      </div>
    </div>

    <div class="c100 p25 orange">
      <span>25%</span>
      <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
      </div>
    </div>

    <div class="c100 p12 small dark">
      <span>12%</span>
      <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
      </div>
    </div>

Parameters explain:

c100: a div must have a class attribute c100 to display a percentage circle.

p1-p100: which determines the value of percentage.

small, big: which determines the size of circle.

green, orage, dark: which determines the color of circle and bar.