Star Rate

CSS Star Rating

by NullDev

HTML

<div class="rating">
    <div class="rating-upper" style="width: 0%">
        <span>★</span>
        <span>★</span>
        <span>★</span>
        <span>★</span>
        <span>★</span>
    </div>
    <div class="rating-lower">
        <span>★</span>
        <span>★</span>
        <span>★</span>
        <span>★</span>
        <span>★</span>
    </div>
</div>
<br><br>
Percentage: <input id="p" type="text"><input id="apply" type="submit">

CSS

.rating {
  display: inline-block;
  unicode-bidi: bidi-override;
  color: #888888;
  font-size: 25px;
  height: 25px;
  width: auto;
  margin: 0;
  position: relative;
  padding: 0;
}

.rating-upper {
  color: #c52b2f;
  padding: 0;
  position: absolute;
  z-index: 1;
  display: flex;
  top: 0;
  left: 0;
  overflow: hidden;
}

.rating-lower {
  padding: 0;
  display: flex;
  z-index: 0;
}

JavaScript

$(document).ready(function(){
    $("#apply").on("click", function(e){
        e.preventDefault();
        $(".rating-upper").css({
            width: $("#p").val() + "%"
        });
    });
});