Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

README.md

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