Skip to content
⭕️ CSS percentage circle built with jQuery
JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

Latest commit e4da8b4 Oct 27, 2019


Type Name Latest commit message Commit time
Failed to load latest commit information.
config add rtl support Oct 25, 2019
.gitignore replace gulp with webpack Oct 23, 2019
.npmignore Create Nov 2, 2017 Create Nov 2, 2017
LICENSE Initial commit Aug 30, 2015
_gitattributes.txt Initial commit Aug 30, 2015
bower.json Conformed metadata files to latest version. Feb 16, 2016
index.html fix script reference in dev html Oct 26, 2019
package-lock.json 1.0.29 Oct 27, 2019
package.json 1.0.29 Oct 27, 2019
yarn.lock checking in yarn.lock, updated ignore list Nov 3, 2016


CSS percentage circle built with jQuery


Maintainers Wanted!

Custom circles

<div id="custom" class="yellow big"></div> 
<div id="clock" class="purple big"></div>
<div id="custom-color" class="big"></div>
<div id="countdown" class="big"></div>


Update value dynamically

Declare your html

<div class="clearfix">
    <div id="redBecomesBlue" class="red big"></div>
<a href="javascript:void(0);" id="changeCircle">Fill Circle to 95.5</a>

Big blue circle

Handle the click in the script

    $("#redBecomesBlue").percircle({percent: 25,text: "25"});

function changeCircle(){
        text: "",
        percent: 95.5,
        progressBarColor: "#1252c0"


1. Load the module to your page

  <script src="../bower_components/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="../dist/js/percircle.js"></script>
  <link rel="stylesheet" href="../dist/css/percircle.css">

2. Define the circle objects

Big blue circle marked with a percent of 50%:

<div id="bluecircle" data-percent="17" class="big">

Big blue circle

3. Let the script get the job done

<script type="text/javascript">


Percircle is registered as an npm package and can be installed with:

npm install percircle


Percircle is also registered as a Bower package, so it can be pulled down using:

bower install percircle


Option Description via configuration object via data attribute Default
Animate Whether to animate the progress bar on load (or view) { animate: "true" } data-animate="true" true
Clock Display a clock in the percircle { perclock: true} data-perclock="true" false
Countdown Display a countdown in the percircle { perdown: true} data-perdown="true" false
Countdown seconds The amount of seconds to countdown. { secs: 15 } data-secs="15" -
Countdown time up text Text to display when countdown has completed. { timeUpText: 'Complete!' } data-timeUpText="Complete!" -
Countdown reset on click Whether to reset the countdown on percircle click { reset: true } data-reset="true" false
Display text at zero Whether to display text even when the percentage is 0 { displayTextAtZero: true } n/a false
Progress bar color The colour of the progress bar { progressBarColor: '#6188ff' } data-progressBarColor="#6188ff" empty (inherit from class or css)
Text Text to display inside the percirle { percent: 65 } data-percent="65" undefined (use percent value)

Building Percircle Locally

If you'd like to run the development version, percircle uses Webpack to handle build tasks like bundling and minification. First, clone the repository, then run:

# Install the dependencies
npm install

# Launch webpack dev server, whilst watching for any js or css changes 
npm start


Contributions are more than welcome. Please ensure that you spent some time reading our Contributor's Guidelines.


toubou91 chrisahardie chris--jones tinglu tranthanhhoa ahmadajmi Sylphony yireo
toubou91 chrisahardie chris--jones tinglu tranthanhhoa ahmadajmi Sylphony yireo


The original project was created from Andre Firchow and as I didn't find any similar here, I uploaded it.

However, the project loaded all the css transformations, in the percircle.css file. Now, it uses jQuery to apply repeated functionality where needed.

You can’t perform that action at this time.