Create Percentage Circles with jQuery and CSS3 - percircle.js

File Size: 172 KB
Views Total: 66815
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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.