Animating a half circle gauge with css3

Question

I'm currently working on a gauge system for a dashboard and have found css animations the best way for perfomance.

The gauges are half circles that are allowed to go over into a full half circle. The gauge system therefore consist of two

My current approach uses the border radius of a circle while clipping and hiding with a wrapper div.

Here is my current shot: http://codepen.io/kamante/pen/eIdwC

Setting the useMax variable to false makes the gauge animate with random values

The problem is that I want the gauge to at max (half circle) at -90 deg circle, but now i'm faking it with setting it to -88deg.

I must admit that I don't really understand why I need to factor out

Anybody have a solution to making a half circle gauge or can help me point me in the right direction?

Update:

See http://codepen.io/kamante/pen/eIdwC for a working solution using two gauges animating with random values, using css transitions.

Fiddle around with the variables for change gaugewidth (borderSize) and radius.

I really think that there is a reason for building a library using css animation and I'm tempted to build it myself later if I get the time.

From my perspective the only good gauges out there is

justgage.com and bernii.github.io/gauge.js

but none of them really performs well on my nexus 5.

Anyway, hopes this helps somebody else out there.

Answer 1

I have found a plugin that I like to use whenever I need to accomplish this. You can see it here http://anthonyterrien.com/knob/

canvas based ; no png or jpg sprites. touch, mouse and mousewheel, keyboard events implemented. downward compatible ; overloads an input element.