Create Percentage Circles with jQuery and CSS3 - percircle.js

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

percircle.js is a lightweight jQuery plugin used to create a pure CSS circle / ring to represent percentage data using CSS3 transforms and a little JavaScript.

Great for creating progress bars or loading indicators for your web application.

See also:


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

  • data-percent: percentage value
  • class="blue": built-in themes. "blue", "purple", "orange", or "yellow"
  • class="dark blue": dark mode
  • class="big": big percentage circle. "small" = small size. Empty = medium size
<div id="demo" data-percent="20" class="big dark blue">

3. Activate the plugin and done.


4. Customize the text displayed in the middle of the circle using the "data-text" attribute.

<div id="demo" 
     data-text="Custom Text" 
     class="red big">

5. More HTML data attributes to config the percentage circle.

  • data-animate: Enable/disable the animation. Default: true.
  • data-perclock: Display a clock in the circle. Default: false.
  • data-perdown: Display a countdown in the circle. Default: false.
  • data-secs: The amount of seconds to countdown. Default: 15.
  • data-timeUpText: Text to display when countdown has completed.
  • data-reset: Reset the countdown on click.
  • data-progressBarColor: Background color.

6. You can also pass the options to the "percircle()" method during init.

  perdown: true,
  secs: 14,
  timeUpText: 'finally!',
  reset: true,
  // more options here



  • add rtl support


  • fix vertical centering issue on text span
  • fix hover states


  • Removed gt50 class when updating value dynamically.


  • 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 thodorisbais. For more Advanced Usages, please check the demo page or visit the official website.