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

You have a small mistake in the calculus

.gauge2 .box {
    border: 18px solid #0000ff;
    width: 150px;
    height: 150px;
    clip: rect(0, 225px, 90px, 0px);
}

If you calculate the final dimensions of the box, it is width=150px + border=18px + border=18px = 186px.

So, if you want to get half a circle, you have to clip at 186px / 2 = 93px. But you are clipping at 90 px.

So, you have to set

    clip: rect(0, 225px, 93px, 0px);

Answer 2

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.