The concept for the progress bar is shamelessly stolen from Twitter's
bootstrap styling system.
The background is a repeating-linear-gradient, with a
fallback to a solid colour. A background-size is set
to above 100%, so that the gradient doesn't have a veritcal cut-off
that may show up when it is animated.
The animation is CSS animation of the
background-position-x, which does involve a little bit
of trig!
The amount of bar that is filled is set by changing the
right value on the inner div. You can also do RTL
bars by the same method.
Basic counter-y thing, based of a simple SVG image. The counter is animated by using a CSS transition on the background position, implemented by a simple piece of javascript (and a lot of on load boiler plate, which I need to turn into a library.
