Component: Rating Star rating system with static and interactive modes

Overview

• Static rating display
• Interactive rating selection
• Supports fractional values (3.5)
• Custom number of stars
• Lightweight and flexible

Basic usage

Add a container with data-anim-rating.

<div
	class="rating"
	data-anim-rating
	data-anim-rating-value="3.5"
></div>

Interactive mode

Enable user interaction by adding data-anim-rating="set".

<div
	class="rating"
	data-anim-rating="set"
	data-anim-rating-value="3"
></div>

Fractional values

You can use decimal values like 3.5.

data-anim-rating-value="4.5"

Number of stars

Change total number of stars using data-anim-rating-size.

<div
	data-anim-rating
	data-anim-rating-size="10"
></div>

Behavior

1. Stars are generated dynamically
2. Value is split into full + partial
3. Click sets rating (interactive mode)
4. Hover shows preview

Download

Use Rating component for reviews, products, feedback systems and UI dashboards.