HTML CSS JavaScript Ruby
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
static
.gitignore
LICENSE
README.md
index.html

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