Create Percentage Circles with jQuery and CSS3 - percircle.js

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:

• Best Circular/Radial Progress Bar JavaScript Plugins

Installation:

# Yarn
$ yarn add percircle

# NPM
$ 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="//code.jquery.com/jquery.min.js"></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">
</div>

3. Activate the plugin and done.

$("#demo").percircle();

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

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

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.

$("#demo").percircle({
  perdown: true,
  secs: 14,
  timeUpText: 'finally!',
  reset: true,
  // more options here
});

Changelog:

2022-01-19

• v1.0.33

2022-01-16

• v1.0.32

2019-10-26

• add rtl support

2018-03-08

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

2018-01-26

• Removed gt50 class when updating value dynamically.

2017-04-27

• v1.0.20

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