Material Design CSS Only Animated Rating Bar Library

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">

3. CSS to turn radio buttons into a star 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.

Related Posts


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Responsive FAQ Accordion Dropdown In HTML and CSS

How to create responsive accordion Expandable and Collapsible Frequently Asked Questions Elements. Accordion HTML, is an easy and seamless accordion FAQ component built with CSS and HTML…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…


Simple Fireworks Animation With JavaScript | fireworks-js

fireworks-js is a JavaScript library that adds configurable fireworks animations with sound effects to your webpage. Features Must Read: A Vue Hook Composable For Playing Sound Effects…

Leave a Reply

Your email address will not be published. Required fields are marked *