Create CSS3 proportion Circle mistreatment jQuery percircle.js Plugin

It is a Plugin to form pure CSS primarily based proportion circle designed with jQuery. you’ll use this plugin to show proportion primarily based report conjointly this plugin support circular time progress and custom enumeration. largely you’ll use this plugin to show circular proportion progress bar.

Integrate CSS3 proportion Circle

Follow below steps to integrate CSS3 proportion Circle in your net primarily based comes.

Libraries

Include Plugins CSS (percircle.css) + load jQuery core library subsequently embody 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 even have incontestible four kinds of Circle with a progress bar.

  1. CSS proportion Circle with custom text.
  2. Clock primarily based CSS proportion Circle with progress.
  3. CSS proportion Circle with a custom color.
  4. CSS proportion Circle with enumeration and progress bar.
<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, decision the plugin’s and apply totally different properties to create all the four kinds 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!' });
});

Leave a Reply