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:

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? Accordingly I`ll use HTML and CSS3.

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.

<span class="stars-bar-rating"><i style="width:85%"></i><b></b></span>

And CSS:

.stars-bar-rating {
display:block;
width:114px;
height:25px;
background: #aaa;
}
.stars-bar-rating i {
display:block;
height:25px;
overflow:hidden;
background: #fe9100;
}
.stars-bar-rating b {
display:block;
margin-top:-25px;
width:114px;
height:25px;
overflow:hidden;background: url('img/stars-bar-bg.png') no-repeat;
}

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.

In case if you like use images as base64, you can change CSS rules for stars-bar-rating b element:

.stars-bar-rating b {
display:block;
margin-top:-25px;
width:114px;
height:25px;
overflow:hidden;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHIAAAAZCAYAAADt7nrkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABWxJREFUeNrsmmuIVVUYhh3nYl7K0jIvmGlZjTlSGF3+CDGk4o+IICqRIoTKCOwG/uhHZVgEZYIVGTSOjXghSygryjIsYXQGLzUzTjOOc5pLTjbVeBln0NFzer94Dyw2a+/9rb3XCYo+eDiHzdrvXmev23c5RTnYsP/tX2/DHdqeAA2Ba9pJENeuB3QV6DceBr0p+xdmP4GBBPflFM9sBBcKMZCbwFKQNa4VKe+Na/cCWFGggXwMrE/ZP5sNggfA7gT3FsU8sw0s4GAqp4bebpVdGGzP+bV2MAaUgmbP2rvZ52vAKc/a26i9KOffnqb2o9obtCtyO6jj97WeV0wN6AdDoNqz9tv8PAo+9qy9hp+fgz0edY+DLfwufe7wuSLv4AzJ862nmXccTDJ0x4MOT9q1MlEN7ZvBOU/aHwXex4MeV+PKgPYKzU2agdwZEBYWeur0Kov2c560H7Fof+BBN2uZ2CVgnwft38HkgPYVoMfH1vqG5dpOsD/lFnISVFmubwC/ptRuApst16s8bH27QG3g2nnwvgftjeBY4Fqvwlmzbq3nwTHQAN6xzOphxiFfD46A08oZd5Zb5w9ceWHaT4BDIAMGldpnQBvYD+6N0F4NfgTdYEip3U9t+b3zQnTFYdtKh62XK1djf4LD4EswPURbjp8dbPeHTaRItgSMZzNjRInlWukc9CvjqzIwAcwC08B1YDaYzpXVzBXSxbiryyH2ughMAeVgKriRz5Hv7dRtAZ18jsSjZ5Xu/ygwg/0VvQpwAxhPvQajv010Qs4ptIvBJdQS/avBXL6PEvZXtDNEntHHVa3Rvox9nkHNir/fCwbymYjZm5SZ4CC4uwDad4JGUFEA7SfBATClANprwSdghGfdYlCT31qXexS+CjRRd4Av3pf2bdy2xLo4YXxpP2TsVPV0MnxprzS0twa86bRUB73W5Z4GsTGwfcv5Od+DtniKvwW05byd5UH7YcuZVudpMF+2HGkymGU+VmJY+PF4CuHJxkq0OQuVKbTnhh3yzAxdn0J7SYRjIoM5zvMgmoNZnFBXfJsNcXHksgTCU+nlRtmJhCvzdsZXUSaec3nC7TTOc90LJiTQXqXwWDclODMlZl2vTQjc4yBcyiyKxk6C2Q7a1xpnYpyJaz7aQbuSoZbGvuIq0Govc0gCvOs4kKtdEgIXOwSx4lJfqWwrbvlIB+1SMNZBu9hBe5xD+4mOlaJLHdpe7pg0GOtSxmp3LOdoa4ndjJu01sF7NPYLOOWg3chEvcZaXWqDsCMObWsdB/KgdiAHGVi7WJ2yneiedtAdsKSswqzTsc8dHHyN7UtQcNYOfMZRO6MdyO6QH1gSsS22OKzIsOxQWcpJ8nNEdqgkZJL0pNQeE7I9ZxwmSdg7GRVSfO62ZdyGhyScg2muOWAb02BL+XKSzKqMJVVWCb4He8FCS5+0W3G9ZXIsZjpsB7glxSrutJxTzzKVuZmpQ9POKCdJv2XHkXTnKzzeXgeTLLtanyZpvsbwkCaCtywuuiS07zLalStrfYuNeySQ/9TS5mvWDvPt5itLSzcZ98yzlJWkTRWTFvl2ryoT5tMM13+JpWYqv/3NQJjyoUL7kOENj6C3G/TSJX5+Cow0tPdowo/7KPoiY78o+4Z/ARmtKAhfYOghmfz3YgZe2m5kNWAmqyZxBWoJ3OewSpCNGZjXWK1YoHjZBxi4L2JlJcr6wPNMwb2k0K7hGNyv+JtLGyeRtF8XNpDZgPjRCMEhy0vfAlpDVooZQ1YpJkfwpVez1GPTzus3U3so5PnZQPscy1jrFJOkiZPDxVrAFxHvI2sU7Xc5an8HPrOVsf6p/7XmEv5b7b9s3t7JXwIMACq2IzxrLEqNAAAAAElFTkSuQmCC') no-repeat;}

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

<div class="stars-rating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4.75</span> stars, based on <span itemprop="reviewCount">4</span> reviews
</div>

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.

HTML is very small:

<div class="wa-star-bar-rating"><i style="width:90%"></i></div>

The same simple CSS:

.wa-star-bar-rating,
.wa-star-bar-rating i {
display: block;
height: 50px;
}
.wa-star-bar-rating {
width: 250px;
-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 150 150" height="150px" width="150px"><g transform="translate(-25,0)"><path d="m 172.35714,67.190469 -36.77859,35.505441 8.39818,50.4259 -45.132893,-24.00674 -45.362705,23.5696 8.884939,-50.34242 L 25.932197,66.483167 76.55628,59.376583 99.401613,13.644842 121.80408,59.595151 Z" /></g></svg>') repeat-x;
mask: url('data:image/svg+xml;utf8,<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 150 150" height="150px" width="150px"><g transform="translate(-25,0)"><path d="m 172.35714,67.190469 -36.77859,35.505441 8.39818,50.4259 -45.132893,-24.00674 -45.362705,23.5696 8.884939,-50.34242 L 25.932197,66.483167 76.55628,59.376583 99.401613,13.644842 121.80408,59.595151 Z" /></g></svg>') repeat-x;
-webkit-mask-size: 50px 50px;
mask-size: 50px 50px;
background-color: #aaa;
}
.wa-star-bar-rating i {
background-color: #fe9100;
}

In example 5 stars (mask-size take 1/5 from main div). If you wish 10 stars rating bar, mask-size must take 1/10 from main div.