Percentage based star ratings

index.markdown

★★★★★

☆☆☆☆☆

Percentage-based-star-ratings.markdown

Percentage based star ratings

Getting a star rating using a %

Forked from Zach Reed's Pen Percentage based star ratings.

A Pen by Captain Anonymous on CodePen.

License.

script.js

// change this to adjust the rating display
var bvTireRating = 2.5;
// multiply by 20 to get percentage
var starRating = bvTireRating*20;
// set the width of the stars
$('.star-ratings-top').width(starRating+'%'); 

style.scss

.star-ratings {
  unicode-bidi: bidi-override;
  color: #c5c5c5;
  font-size: 50px;
  height: 50px;
  width: 250px;
  margin: 1em auto;
  position: relative;
  padding: 0;
  
  .star-ratings-top {
    color: gold;
    padding: 0;
    position: absolute;
    z-index: 1;
    display:block;
    left: 0px;
    overflow: hidden;
  }
  .star-ratings-bottom { z-index: 0; }
}