Rating bar is an animated rate bar that supports half-star ratings, created with radio buttons and CSS/CSS3.

custom rating bar in github, custom rating bar size, rating bar material design, com hedgehog ratingbar ratingbar, small rating bar library

How to make use of it:

1. The Font Awesome rating is used for star icons.

<link rel="stylesheet" href="/path/to/cdn/font-awesome.min.css" />

2. Add radio buttons to the classification container.

<div class="rating">
  <input type="radio" name="html">
  <input type="radio" name="html">
  <input type="radio" name="html">
  <input type="radio" name="html">
  <input type="radio" name="html">
  <input type="radio" name="html">
  <input type="radio" name="html">
  <input type="radio" name="html">
  <input type="radio" name="html">
  <input type="radio" name="html">
</div>

3. CSS to turn radio buttons into a star rating.

.rating{
  position: relative;
  display: flex;
  margin: 10px 0;
  flex-direction: row-reverse ;
}

.rating input{
  position: relative;
  width: 20px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
}

.rating input::before{
  content: '\f005';
  position: absolute;
  font-family: fontAwesome;
  font-size: 34px;
  position: absolute;
  left: 4px;
  color: #030b0f;
  transition: 0.5s;
}

.rating input:nth-child(2n + 1)::before{
  right: 4px;
  left: initial;
}

.rating input:hover ~ input::before,
.rating input:hover::before,
.rating input:checked ~ input::before,
.rating input:checked::before{
  color: #1f9cff;
}

CSS Only Animated Rating Bar Plugin/Github

See Demo And Download

Official Website(Mahima-Gupta1315): Click Here

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