Star Rating

Star rating widgets can be used for products, comments, and more. If you want to allow your users to select ratings on your site, check out these examples.

Rater.js

http://auxiliary.github.io/rater/

With only a few lines of code, this JavaScript library allow you to add a star rating widget to your pages.

Add this JavaScript to a script tag:

$(".rating").rate();

//or for example
var options = {
    max_value: 6,
    step_size: 0.5,
}
$(".rating").rate(options);

Add this HTML to your page:

<div class=”rating” data-rate-value=6></div>

star-rating-svg

This widget is very similar to Rater.js, but uses SVG icons instead of UTF-8 characters. It also can be added with just a few lines of code, and it makes it easy to customize the appearance of the stars.

http://nashio.github.io/star-rating-svg/demo/

Add this JavaScript to a script tag:

$(".my-rating").starRating({
  initialRating: 4,
  strokeColor: '#894A00',
  strokeWidth: 10,
  starSize: 25
});

Add this HTML to your page:

<div class="my-rating"></div>