The article goes on to suggest this would be an ideal use case for the meter tag, however at that time it was impossible to style the meter tag to look like this. This afternoon after discovering that shadow DOM support had made it into Chrome stable I attempted to recreate the Just Giving meter using no images and without a mess of divs.
This is the result, one I'm pretty happy with, I haven't really made much attempt to style the surrounding areas, I just wanted to concentrate on the (frankly rather cool) meter:
My CSS version uses the shadow DOM to remove the default styles from the meter, colour it blue then uses a SVG mask to make the circular centre meter. The surrounding border is an SVG star rendered as the background of the element.
SVG files were generated using inkscape and can be seen in the live demo.
The percentage cannot currently be calculated using CSS, calc() doesn't work using two attr() values.
This example requires a recent version of Google Chrome
In this example I've modified the mark-up from the original example to just use one meter tag but preserved the
While this approach would not be suitable for use in a live site yet without a great deal of graceful degradation it is a very good example of the power of HTML5 & CSS3 and shows the ability they have to combine semantic mark-up and amazing presentation.