I got nerdsniped
still looking for pure css gauges, ideas?
— Almog Melamed (@radagaisus) November 28, 2012
So I had to make this gauge using CSS animation.
I used two nested divs with round borders. The outer one does the quadrants with a top/left/bottom/right border. The inner one has only a top border, and slides over the bottom one.
Note that halfway through, the inner border changes from sliding out, to sliding in. Otherwise you’d get in trouble during the last quadrant.
A good way to see how it works is removing the negative margin, or change the inner border colour.
