Progress/Counting Bars

Progress Bar

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.

Simple SVG Counter

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.

Sorting out a time