Smooth Star Rating Plugin with jQuery and CSS3 - voteStar.js

File Size: 12 KB
Views Total: 2221
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Smooth Star Rating Plugin with jQuery and CSS3 - voteStar.js

voteStar.js is a tiny jQuery star rating plugin that uses CSS3 transitions for smooth fill animations.

How to use it:

1. Load jQuery library and the jQuery voteStar.js plugin's JS & CSS files in your web project.

<link rel="stylesheet" href="dist/voteStar.css">
<script src="//"></script>
<script src="dist/jquery.voteStar.js"></script>

2. Create a star rating system using inline html elements as follow. The data-starnum attribute is used to specify the initial value.

<span class="event_star star_big" data-starnum="3"><i></i></span>
<span class="event_star star_in" data-starnum="3.5"><i></i></span>
<span class="event_star star_small" data-starnum="2"><i></i></span>

3. Initialize the star rating system by calling the fucntion on the top element.


4. There are a few options you can use when initializing the plugin.


// highlight the rating stars on mouse move
moveStar: false, 

// the number of rating stars
starLength: 5,

// enable half-stars
precise: false, 

// enable animation
starAnimate: true,

// callback function
callback: null 


This awesome jQuery plugin is developed by jmjweb. For more Advanced Usages, please check the demo page or visit the official website.