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> 
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> 
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> 
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 |
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.
