Implement Circular Progress Bar with Pure CSS – CSS Tutorial

Circlular progress bar can be used in statistic field. In this tutorial, we will introduce how to implement a circular progress bar with pure css. It looks like this.

Import css-circular-prog-bar.css file

You can download this css file in here: https://github.com/jumpifzero/purecss-circular-progress-bar

<link rel="stylesheet" type="text/css" href="css-circular-prog-bar.css" />

Implement circular progress bar

<div class="progress-circle p10">
   <span>10%</span>
   <div class="left-half-clipper">
      <div class="first50-bar"></div>
      <div class="value-bar"></div>
   </div>
</div>
<div class="progress-circle p33">
   <span>33%</span>
   <div class="left-half-clipper">
      <div class="first50-bar"></div>
      <div class="value-bar"></div>
   </div>
</div>
<div class="progress-circle over50 p66">
   <span>66%</span>
   <div class="left-half-clipper">
      <div class="first50-bar"></div>
      <div class="value-bar"></div>
   </div>
</div>

How to set percent value and status of progress bar?

1.You can set percent value in span html tag.

2.You can set p0-p100 for progresr bar status.

3.When percent value is bigger than 50%, you shoud add over50.

However, this pure css has one limitation. That is it is hard to change the progress bar size for us.

Here is Demo.