Wednesday, August 5FreeJQuery

How To Create Percentage Circles with jQuery and CSS3

Percentage Circles

This Article Is about how To Create Percentage Circles with jQuery and CSS3 percircle.js is a lightweight jQuery module used to make an unadulterated CSS circle/ring to speak to rate information utilizing CSS3 changes and a little JavaScript.

Extraordinary for making progress bars or stacking markers for your web application.

Check also:

ProgressBar: jQuery Image Progress Bar Plugin

Installation of percircle.js:

# Yarn
$ yarn add percircle

$ npm install percircle –save

Step by step instructions to utilize it:

1. Incorporate the jQuery library together with the jQuery percircle’s JavaScript and template on the website page.

<link rel=”stylesheet” href=”css/percircle.css”>
<script src=”//”></script>
<script src=”js/percircle.js”></script>

2. Make the html structure for the rate circle.

<div id=”demo” data-percent=”20″ class=”big dark blue”>

3. Initiate the module and done.


4. Modify the content showed in the circle utilizing the “information content” characteristic.

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

5. More HTML information credits to config the rate 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 likewise pass the choices to the “percircle()” technique during init.

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


Leave a Reply

Your email address will not be published. Required fields are marked *