nostalgiaz / donuts Goto Github PK

I made a compact/adapted version at https://gist.github.com/arnehormann/5082064 which uses these tricks:

By using font-size for sizing, the size only has to be given once and we can use em for everything. The only downside is that it has to be the first property specified.
This way we can get rid of all special handling of .donut-big and .donut-small except for the very first occurence.

.donut-bow is not needed - we can get rid of it and use .donut:before instead. In it, I use clip: rect instead of rotation, this way I only need to specify one border-color - it's probably faster, too.
In javascript, you have to replace line 24 ($this.siblings().addClass(color);) by $this.parent().addClass(color); which also allows the addition of different sibling elements (think tooltips).

This is a little intrusive for a pull request (and I really just wanted to mess around with the codebase without the need for a build environment), but please feel free to incorporate any parts you like from my version.

Great demo, thanks for sharing it!

I would love to have the "donut" have two colors. Basically, one color below the percentage and another above. Think a fuel gauge that shows the empty part red and the part with fuel as green.

I have no idea if this is even possible. :)

Can you add a license? This looks awesome, but I can't use for my projects without knowing the license.