CSS percentage circle built with jQuery
#Demo Dark circles:
Custom circles:
Default circles:
#Usage ####1. Load the module to your page
<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/percircle.js"></script>
<link rel="stylesheet" href="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>
Default orange circle marked with a percent of 37%:
<div id="orangecircle" data-percent="37" class="orange">
</div>
Small pink circle marked with a percent of 94%:
<div id="pinkcircle" data-percent="94" class="small pink">
</div>
Big red dark circle, 43% filled, without animation:
<div id="redcircle" data-percent="43" data-animate="false" class="dark red big">
</div>
####3. Let the script get the job done ```html <script type="text/javascript"> $(function(){ $("[id$='circle']").percircle(); }); </script> ```
###Custom circles
<div id="custom" class="yellow big"></div>
<div id="clock" class="purple big"></div>
#TODO
- Resolve #17
- Update
README.md(sections Demo, Usage, Credits) according to #10.~~ - Close all pending issues that are now resolved with #10.~~
#Contribute Feel free to submit a pull request for the existing issues or even introduce bugs/enhancements by opening a new issue.
#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.