Create Percentage Circles with jQuery and CSS3 - percircle.js

Create Percentage Circles with jQuery and CSS3 - percircle.js
File Size: 2.93 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.


# Yarn
$ yarn add percircle

$ npm install percircle --save

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="//"></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">
  <div class="slice">
      <div class="bar"></div>
      <div class="fill"></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:


  • v1.0.20


  • Use universal variable naming for html/js attributes


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


  • added countdown timer support


  • RTL support


  • Feature/dynamic circle color


  • v1.0.8: New (and future) structure


  • JS fix.


  • Fixed formatting

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