Create Percentage Circles with jQuery and CSS3 - percircle.js

Create Percentage Circles with jQuery and CSS3 - percircle.js
File Size: 2.83 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

percircle.js is a lightweight jQuery script used to create a pure CSS circle / ring to represent percentage data using CSS3 transforms and a little JavaScript. Great for creating static progress bars or loading indicators for your web application.

How to use it:

1. Include jQuery library together with the jQuery percircle's JavaScript and style sheet on the web page.

<link rel="stylesheet" href="css/percircle.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/percircle.js"></script>

2. Create the html structure for the percentage circle.

  • class="c100": maximum percentage
  • class="p25": current percentage
  • class="big": big percentage circle. "small" = small size. Empty = medium size.
<div class="c100 p25 big">
  <span>25%</span>
  <div class="slice">
      <div class="bar"></div>
      <div class="fill"></div>
  </div>
</div>

3. Change the default color scheme. Default is 'blue'. Available CSS classes: 'green', 'orange', 'dark' or 'pink'. You can also add your own color schemes in the CSS.

<div id="bluecircle" class="c100 p17 green">

Change log:

2016-10-13

  • Use universal variable naming for html/js attributes

2016-10-12

  • Resolved: strict mode does not allow function declarations in a lexically nested statement

2016-07-19

  • added countdown timer support

2016-07-14

  • RTL support

2016-06-06

  • Feature/dynamic circle color

2016-02-15

  • v1.0.8: New (and future) structure

2015-12-26

  • JS fix.

2015-10-09

  • Fixed formatting

 


This awesome jQuery plugin is developed by toubou91. For more Advanced Usages, please check the demo page or visit the official website.