jRate jQuery SVG-based rating plugin helps create an SVG-based RATING with various cool features. Download this plugin and include it in your HTML file.

jquery star rating svg js, dynamic star rating jquery, star rating svg css, half star rating jquery, star rating js

Star Rating Plugin Control Based On Radio Buttons

How to make use of it:

1. Load the jQuery library and jRate plugin script into the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jRate.min.js"></script>

2. Create a container to place the rating system.

<div id="jRate"></div>

3. Call the plugin on the empty container you just created to initialize the rating system.

$("#jRate").jRate({

// initial rating
rating: 3,

});

4. All options are default.

$(function () {

$("#jRate").jRate({

// initial rating
rating: 0,

// STAR, RECTANGLE, SQUARE, CIRCLE, RHOMBUS, TRIANGLE
shape: "STAR",

// Number of shapes was decided by the count parameter.
count: 5,

// width and height of the rating shapes.
width: "20",
height: "20",

// Make the shapes from smaller to bigger. 
widthGrowth: 0.0,
heightGrowth: 0.0,

backgroundColor: "white",

// start color & end color
startColor: "yellow",
endColor: "green",

// SVG Stroke color
strokeColor: "black",

// gap between two shapes
shapeGap: "0px",

opacity: 1,

// Minimum and Maximum Value
min: 0,
max: 5,

// Set the precision value.
precision: 1,

// false = vertical
horizontal: true,

// make reverse
reverse: false,

// read only rating
readOnly: false,

// callbacks
onChange: null,
onSet: null

});

});

jQuery Plugin For SVG Based Custom Rating System, jRate Plugin/Github

See Demo And Download

Official Website(senthilporunan): Click Here

This superior jQuery/javascript plugin is developed by senthilporunan. For extra Advanced usage, please go to the official website.