Skip to content
A star rating jQuery plugin that uses SVG for easier customization
JavaScript CSS
Branch: master
Clone or download
Ignacio Chavez Ignacio Chavez
Ignacio Chavez and Ignacio Chavez fix tag
Latest commit 2ebd978 Dec 9, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo adds minimum rating Oct 8, 2018
dist adds minimum rating Oct 8, 2018
src adds minimum rating Oct 8, 2018
.editorconfig initial commit Aug 23, 2015
.gitignore initial commit Aug 23, 2015
.jshintrc initial commit Aug 23, 2015 initial commit Aug 23, 2015
Gruntfile.js removes meta info Aug 24, 2015
LICENSE license Aug 27, 2015 adds minimum rating Oct 8, 2018
bower.json plugin name update Aug 24, 2015
package.json fix tag Dec 9, 2018

A basic, yet flexible star rate jQuery plugin, using SVG.


  • Doesn't use external images
  • Customize size
  • Customize colors
  • Use half or full stars
  • Choose the number of stars to be displayed
  • Define gradient color of selected stars
  • Specify a border/stroke thickness and color
  • Specify initial rating via options or markup data attribute
  • Execute callback after rating (ex. to notify a server)
  • onHover and onLeave events
  • Locked / Read-only mode
  • Unload option
  • Change star shape (rounded or straight)
  • Resize stars


For a working demo, see:


  1. Include jQuery:

    <script src=""></script>
  2. Include plugin's code:

    <script src=""></script>
  3. Include plugin's css:

    <link rel="stylesheet" type="text/css" href="star-rating-svg.css">
  4. Add the markup

    <div class="my-rating"></div>
  5. Call the plugin:

        starSize: 25,
        callback: function(currentRating, $el){
            // make a server call here


option default description
totalStars 5 Amount of stars to show
initialRating 0 Initial rating applied on load
minRating 0 Specify the lowest rating
starSize 40 width in pixels of each star
useFullStars false rate using whole stars, if enabled, it doesn't use half-steps
emptyColor lightgray Color assigned to an empty star
hoverColor orange Color assigned to hovered star
activeColor gold Color assigned to active rated star
ratedColor crimson Color assigned to manually rated star
useGradient true Active stars will use gradient coloring
To use this option you need to populate the object [starGradient]
starGradient {start: '#FEF7CD', end: '#FF9511'} Define the star and end colors for the gradient
readOnly false If false any interaction is disabled
disableAfterRate true Removes further events once a rate is selected
strokeWidth 0 Defines the thickness of the border, 0 is disabled
strokeColor black Defines the color for the border
starShape 'straight' or 'rounded' Change the star shape type
baseUrl false when enabled (true), enables compatibility with the base tag in your head section
forceRoundUp false if true, forces rounding the initial rating to the nearest upper half even if the value is closer to the lower (1.1 -> 1.5 rather than 1.1 -> 1.0)


method arguments description
unload   Destroys the instance and removes events attached to it
setRating 0 to max stars (int), round (Boolean) Manually sets the rating
getRating   Gets the current rating from instance
resize 1 to 200 Resize the stars on the fly
setReadOnly Boolean Disable or enable stars manually
// unload/destroy example
// set rating example
$('your-selector').starRating('setRating', 2.5)
// set rating and round
$('your-selector').starRating('setRating', 2.8, true) // 3.0
// get rating example
// resize
$('your-selector').starRating('resize', 50)
// disable/enable stars manually
$('.your-selector').starRating('setReadOnly', true);


name arguments description
callback rating, DOM element Executes when selecting a rate
    callback: function(currentRating, $el){
    	// do something after rating


method description
onHover executes a callback on mouseover
onLeave executes a callback on mouseout
    onHover: function(currentIndex, currentRating, $el){
			// do something on mouseover
    onLeave: function(currentIndex, currentRating, $el){
			// do something after mouseout


Code example


Source file


Minified version




  • Specify the lowest rating with 'minRating'


  • Adds color for manually rated stars 'ratedColor'


  • Adds public method to disable & enable stars manually


  • Fixes issue when using SVG + base tag


  • Change the star type
  • Adds method to resize star on the fly


  • Fixes Firefox hover issues


  • Adds set rating, and get rating
  • Adds onHover event
  • Adds onLeave event


  • Fixes support for enabling full stars


  • Returns element on callback
  • Fixed typos


  • Fixed bugs related to rendering in retina


  • Added readonly mode


The MIT License (MIT)

You can’t perform that action at this time.