We are using rateYOfor ratings.RateYo!is a tiny and flexible jQuery star rating plugin,it uses SVG to render rating,so no images required. just create a <div>,throw some styles,initialize and thats it!.Hover to change the rating and Click to set.
Default

This is the most basic example of ratings.

onSet

This function is called whenever the rating is set.

onChange

This function is called whenever the rating is changed.

0
Normal Fill

The background color for the un-rated part of a star.You can set this option using data-rateyo-normal-fillattribute.

Rated Fill

The color for the rated part of a star.You can set this option using data-rateyo-rated-fillattribute.

Num Stars

Number of stars to use,to display the rating.You can set this option using data-rateyo-num-starsattribute.

Max Value

The Maximum value,you want the rating to end with. You can set this option using data-rateyo-max-valueattribute.

Read Only

If you want the rating to be non-editable.You can set this option using data-rateyo-read-only="true"attribute.

Spacing

The amount of space between stars in pixels.You can set this option using data-rateyo-spacingattribute.

Half Star

When set to true,rating will be displayed in the steps of 0.5. You can set this option using data-rateyo-half-star="true"attribute.

Full Star

When set to true,rating will be displayed in the steps of 1.You can set this option using data-rateyo-full-star="true"attribute.

Multi Color

you can set this option using data-rateyo-multi-color="true"attribute,This option helps in changeing the color of the rating,as the rating value changes(Multi Color).

Star With

The width of each star,the width of a star is always equal to its height.You can set this option using data-rateyo-star-widthattribute.

add