🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

progress-bar loading-bar

Documentation

percircle

CSS percentage circle built with jQuery

Demo

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>

Custom


Update value dynamically

Declare your html

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

Big blue circle

Handle the click in the script

$(document).ready(function(){     $("#redBecomesBlue").percircle({percent: 25,text: "25"});     $('#changeCircle').click(function(e){         e.preventDefault();         changeCircle();     }); });  function changeCircle(){     $("#redBecomesBlue").percircle({text:''});     $("#redBecomesBlue").percircle({         text: "",         percent: 95.5,         progressBarColor: "#1252c0"     }); }

Usage

1. Load the module to your page

<!DOCTYPE HTML> <html> <head>   <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"> </head> </html>

2. Define the circle objects

Big blue circle marked with a percent of 50%:

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

Big blue circle

3. Let the script get the job done

<script type="text/javascript">     $(function(){         $("#bluecircle").percircle();     }); </script>

npm

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

npm install percircle 

Bower

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

bower install percircle 

Building Percircle Locally

If you'd like to run the development version, percirle uses Gulp to automate basic tasks, like building. Head over to https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md for more information. First, clone the repository, then run:

npm install -g gulp npm install  # Watches the js files for changes, while linting them concurrently  gulp watch  # Runs jshint and builds a minified version of the files. gulp 

Contribute

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

Contributors

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

Credits

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 May Also Like