Simple Customizable Star Rating System - jQuery fxss-rate

File Size: 62.2 KB
Views Total: 7088
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Customizable Star Rating System - jQuery fxss-rate

fxss-rate is a small yet fully customizable jQuery rating system that enables your visitor to rate your article/product/post with SVG based stars. Supports half star and fractional rating.

How to use it:

1. Insert jQuery JavaScript library and the jQuery fxss-rate plugin's files into the HTML file.

<link rel="stylesheet" href="fxss-rate.css">
<script src="" 
<script src="fxss-rate.js"></script>

2. Load the fxss-rate-iconfont.js for the rating stars.

<script src="fxss-rate.js"></script>

3. Create a container element for the rating system.

<div id="rateBox"></div>

4. Call the function rate on the container element to generate a basic rating system.

  // options here

5. Get the current rating value with the callback function:

  callback: function(object){

6. The full customization options that you can override as per your requirement.


  // 0:svg  1:Font class  2:Unicode
  type: 0,

  // the number of stars
  length: 5,

  // initial value
  value: 3.5,

  // allows half star
  half: true,

  // supports decimal?
  decimal: true,

  // is readonly?
  readonly: true,

  // shows the current rating value on hover
  hover: false

  // shows rating text
  text: true,

  // an array of rating text
  textList: ['Bad', 'Poor', 'Medium', 'Good', 'Perfect'],

  // color
  theme: '#FFB800',

  // text/star size
  size: '20px',

  // space between stars
  gutter: '3px',

  // default CSS classes
  selectClass: 'fxss_rate_select',
  incompleteClass: '', 
  customClass: ''



  • Bugfix

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