Create CSS3 Percentage Circle Using jQuery percircle.js Plugin

0 531

It is a Plugin to create pure css based percentage circle built with jQuery. You can use this plugin to display percentage based report also this plugin support circular time progress and custom countdown. Mostly you can use this plugin to display circular percentage progressbar.

Follow below steps to integrate CSS3 Percentage Circle in your web based projects.

Libraries

Include Plugins CSS (percircle.css) + load jQuery core library after that include percircle.js

<!--CSS-->
  <link rel="stylesheet" href="percircle.css">
<!--JS-->
  <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="percircle.js"></script>

HTML

Below I have demonstrated 4 types of Circle with progressbar.
1. CSS Percentage Circle with custom text
2. Clock based CSS Percentage Circle with progress.
3. CSS Percentage Circle with custom color.
4. CSS Percentage Circle with countdown and progressbar.

<div id="custom" class="yellow big"></div> 
<div id="clock" class="purple big"></div>
<div id="custom-color" class="big"></div>
<div id="countdown" class="big"></div>

JS

Finally call the plugin’s and apply different properties to make all the 4 types of Circles

$(function() {   
  $("#custom").percircle({percent: 25,text: "Text"});
  $("#clock").percircle({perclock:true});
  $("#custom-color").percircle({progressBarColor: "#CC3366",percent: 71.5 });
  $("#countdown").percircle({perdown: true, secs: 45, timeUpText: 'finally!' });
});

See live demo and download source code.

DEMO | DOWNLOAD

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.

Leave A Reply

Your email address will not be published.