Create CSS3 Percentage Circle Using jQuery percircle.js Plugin

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.

Integrate CSS3 Percentage Circle

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

  <link rel="stylesheet" href="percircle.css">

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

="custom" class="yellow big">
> 
="clock" class="purple big">
>
="custom-color" class="big">
>
="countdown" class="big">
>

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.

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.

Related