Pure CSS Progress bar circle
Include CSS library on page for creating percentage circle progressbar.
<link href="css-circular-prog-bar.css" media="all" rel="stylesheet" />
Below are some demo example for creating circular progressbar for different different percentage eg: 10%, 30%, 90% etc.
Creating percentage progressbar circle for 10%.
<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>
You only need to add class p with x% which you have to display progress bar.
percentage progressbar circle for 30%.
<div class="progress-circle p30"> <span>10%</span> <div class="left-half-clipper"> <div class="first50-bar"></div> <div class="value-bar"></div> </div> </div>
See live demo and download source code.
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.