CSS Percentage Circle
#Demo Default circles:
Dark circles:
#Usage ####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>Big blue circle marked with a percent of 50%:
<div id="bluecircle" class="c100 p50 big">
<span>50%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
Default orange circle marked with a percent of 65%:
<div id="orangecircle" class="c100 p65 orange">
<span>65%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
Default orange circle marked with a percent of 65%:
<div id="pinkcircle" class="c100 p82 small pink">
<span>82%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
#Contribute Feel free to submit a pull request for the existing issues.
#Credits and More 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 makes use of the jQuery selectors in order to do so.
In addition, by defining a percircle item for once (that is, by providing a div id, ending with "circle"), all the similar occurences of the specified percentage will be updated, without the need of defining a div id for the corresponding items. This means that if there are three "50%" percircles, only one of them could specify an id ending with "circle".