Simple css rating bar via stars

I like simple solutions, because simple solution means reliability solution. For one of the projects I needed the simple css rating bar consisting of stars.
Basic requirements – a minimum of code, HTML and CSS only. Without JavaScript, without additional font files, but with the percentage rating. It mean, if you have all 5 stars, but the item rating 4.72, the bar must to display 4.72. In addition – easy customization (eg color or size change) and the possibility of adding microformats.
I googling first, but not found anything suitable for my requirements. All already solutions are based on JavaScript, or not showing the percentage value, or did not have customization.
Look at the picture to be clearer, what I mean:

Simple css rating bar, example

I like font awesome and I can use it. But this project dont use font awesome, and I think, loads almost 300kb for rating bar only – it is bad idea, right?

Simple css rating bar, first method

Was coined by own decision, consisting of just one line of html code. HTML code – 80 characters only, JavaScript or additional fonts like “font awesome” is missing.

The principle is very simple – we have element “i”, it will a bar rating. The background color of this element will be color our stars, also you can use the gradient as needed. And on top of this element just added “b” element with background of transparent stars.

Transparent stars for css rating bar

For use the schema.org microformat, just add a few elements with the parameters itemprop = “ratingValue” and itemprop = “reviewCount”:

Second method for simple css rating bar

Thanks to Noah Blon tips, I can use second method for simple css rating bar. In this case HTML take 63 bytes only + SVG 499 bytes. In addition, it very flex method – we can change size and count of stars, also the stars easily scales to the size of you needed.

With will use the mask property. The syntax for a CSS mask-image is similar to background-image, and I think, the code samples very clear.