HTML & CSS Aqua Progress Bars
Thanks to the power of CSS animations in WebKit, it’s possible to finally produce really good looking progress bars that exactly mimc those in Mac OS X, using only HTML and CSS and three small images.
The progress bars produced by the following CSS are fully animated:
- indeterminate progress bars are animated (the ‘barber pole’ effect)
- the ‘filled’ portion of the progress bar is animated (the ‘aqua ripple’ effect)
- alterations to progress (the size of the ‘filled’ section) smoothly animate
This uses webkit draft extensions to CSS, so you’ll need to be using Safari or Chrome or some other webkit based browser to see the effect.
In the demo, hover over the in-progress section of the first bar in order to see it grow to 80% with animation. View source on the demo page to see the simple CSS and extremely simple HTML that’s involved.
