jQuery star-rating-svg.js Plugin Examples

// basic example
<div class="my-rating"></div>
$(".my-rating").starRating({
    initialRating: 4,
    starSize: 25
});

// grab rating from a data attribute
<div> class="my-rating-2" data-rating="2.5"></div>
$(".my-rating-2").starRating({
    totalStars: 5,
    emptyColor: 'lightgray',
    hoverColor: 'salmon',
    activeColor: 'cornflowerblue',
    strokeWidth: 0,
    useGradient: false
});

// define a gradient
<div> class="my-rating-3"></div>
// specify the gradient start and end for the selected stars
$(".my-rating-3").starRating({
    starSize: 50,
    strokeWidth: 3,
    strokeColor: 'darkgray',
    initialRating: 2,
    starGradient: {
        start: '#AABBCC',
        end: '#002233'
    },
});

// execute callback when rating
<div> class="my-rating-4"></div>
$(".my-rating-4").starRating({
    totalStars: 5,
    emptyColor: 'lightgray',
    hoverColor: 'salmon',
    activeColor: 'cornflowerblue',
    initialRating: 4,
    strokeWidth: 0,
    useGradient: false,
    callback: function(currentRating){
        alert('rated ', currentRating);
    }
});

// execute callback when rating
<div> class="my-rating-4"></div>
$(".my-rating-5").starRating({
	readOnly: true
});

// unloading the plugin instance
$(".my-rating").starRating('unload');