Awesome

Css Star Rating ⭐⭐⭐⭐⭐

⭐ Css Star Rating is a pure css star rating plugin based on best practice UX/UI methods. ⭐

Css Star Rating is written in scss and fully customizable over variables.
Easily compose your own rating component over a rich set of css modifiers for any kind of UI state.

Demo

Demos in the KSS style guide

Features

• Written in scss
• Customizable over variables
• Flexbox layout
• SVG icons
• Icon fonts like fontawesome, ionicon...
• Display rating over css class
• Different Numbers of stars
• Color of stars depend on rating
• Half stars
• Sizes
• Star alignments
• Static colors
• Disabled mode
• Star types
• Label
• Label positions
• Animations
• Directions
• Themes

Browser support

Related Projects

Demo

• KSS documentation

Install

Get Css Star Rating:

• clone & build this repository
• download as .zip
• via npm: by running $ npm install css-star-rating from your console

Load library

<link rel="stylesheet" href="node_modules/css-star-rating/css/star-rating.css">

Copy assets (optional) If you want to use svg as icon type copy the
star-rating.icons.svg image form node_modules/css-star-rating/images/star-rating.css to your roots assets folder.

Usage

<div class="rating large star-icon direction-rtl value-1 half color-default label-top">
   <div class="label-value">1.5</div>
    <div class="star-container">
        <div class="star">
            <i class="star-empty"></i>
            <i class="star-half"></i>
            <i class="star-filled"></i>
        </div>
        <div class="star">
            <i class="star-empty"></i>
            <i class="star-half"></i>
            <i class="star-filled"></i>
        </div>
        <div class="star">
            <i class="star-empty"></i>
            <i class="star-half"></i>
            <i class="star-filled"></i>
        </div>
    </div>
</div>

Css Modifiers

.value-[N]:
The actual star rating value. The color of the stars depends on the rating number

• .value-0
• .value-1
• .value-2
• .value-3
• .value-4
• .value-5

<div class="rating value-3">
   <div class="star-container">
        ...stars...
    </div>
</div>

.half:
If set, every rating value will have a half star at the end.

• .half

<div class="rating value-3 half">
   <div class="star-container">
        ...stars...
    </div>
</div>

text:
The text next to the stars.

• (Just additional HTML)

<div class="rating value-3">
   <div class="label-value">My text</div>
   <div class="star-container">
        ...stars...
    </div>
</div>

.label-[VISIBILITY]:
The position of the label.

• .label-visible
• .label-hidden

<div class="rating value-3 label-hidden">
   <div class="label-value">3.5</div>
   <div class="star-container">
        ...stars...
    </div>
</div>

.label-[POSITION]:
The position of the label.

• .label-top
• .label-right
• .label-bottom
• .label-left

<div class="rating value-3 label-right">
   <div class="label-value">Good</div>
   <div class="star-container">
        ...stars...
    </div>
</div>

.space:
If the start use the whole space or not.

<div class="rating value-3 space-between">
   <div class="star-container">
        ...stars...
    </div>
</div>

.[SIZE]:
The height and width of the stars.

• .small
• .medium
• .large

<div class="rating value-3 large">
   <div class="star-container">
        ...stars...
    </div>
</div>

color-[COLOR_NAME]:
Static color of stars.

• .color-default
• .color-negative
• .color-ok
• .color-positive

<div class="rating value-3 color-negative">
   <div class="star-container">
        ...stars...
    </div>
</div>

.disabled: The click callback is disabled, colors are transparent

<div class="rating value-3 disabled">
   <div class="star-container">
        ...stars...
    </div>
</div>

.direction-[DIRECTION]:
The direction of the stars and label.

• .direction-rtl
• .direction-ltr

<div class="rating value-3 direction-rtl">
   <div class="star-container">
        ...stars...
    </div>
</div>

.[ANIMATION_SPEED]:
The duration of the animation in ms.

• .immediately
• .noticeable
• .slow

<div class="rating value-3 slow">
   <div class="star-container">
        ...stars...
    </div>
</div>

starType:
The type of start resource to use.

• .star-svg
• .star-icon (star character)
• .custom-icon (i.e. font-awesome)

<div class="rating value-3 star-icon">
   <div class="star-container">
        <!-- font icons-->
        <div class="star">
            <i class="star-empty"></i>
            <i class="star-half"></i>
            <i class="star-filled"></i> 
        </div>
        <!-- or svg icons-->
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>

Themes

As a bonus there are some themes as classes. theme-[NAME]:
The type of start resource to use.

• .theme-google-places
• .theme-kununu

<div class="rating value-3 theme-google-places">
   <div class="star-container">
        ...stars...
    </div>
</div>