donuts
Demo
http://www.larentis.eu/donuts/
Usage
Just include jQuery, donuts.css CSS and donuts.js
<link href="donuts.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="donuts.js"></script>Example
<div class="donut donut-big">
<div class="donut-arrow" data-percentage="10"></div>
</div>
<div class="donut">
<div class="donut-arrow" data-percentage="30"></div>
</div>
<div class="donut donut">
<div class="donut-arrow" data-percentage="60"></div>
</div>
<div class="donut donut-small">
<div class="donut-arrow" data-percentage="90"></div>
</div>Update Donut Percentage
Just target your arrow of choice and call the custom event below with the new percentage as an argument.
$('.donut-arrow').trigger('updatePercentage', 100)License
Licensed under the Apache License, Version 2.0 http://www.apache.org/licenses/LICENSE-2.0
Credits
Arne Hormann helps me to simplify the structure, the css and the js