Wishful Coding

Didn't you ever wish your computer understood you?

Pure CSS Gauge

I got nerdsniped

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.

Pepijn de Vos