Customizable 5-Star Rating System In Pure CSS/SCSS

Category: CSS & CSS3 , Recommended | April 4, 2020
Author: BioPhoton
Views Total: 113
Official Page: Go to website
Last Update: April 4, 2020
License: MIT

Preview:

Customizable 5-Star Rating System In Pure CSS/SCSS

Description:

A highly customizable, pure CSS 5-star rating system for visitors to evaluate and compare your products & services in an intuitive way.

Key features:

  • Scalable SVG star symbols.
  • Or use your own star icons.
  • Supports half star rating.
  • Custom labels, sizes, colors, directions, and more.
  • 2 themes: Google Places and Kununu

How to use it:

1. Install & download.

# NPM
$ npm install css-star-rating --save

2. Load the star-rating.min.css in the HTML document.

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

3. The HTML to create a default star rating system.

<div class="rating">
 <div class="label-value">Value Label</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 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>

4. Or use a custom SVG icon.

<div class="rating">
  <div class="label-value">Custom Icon 3.5</div>
  <div class="star-container">
    <div class="star">
      <svg class="star-empty">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/images/star-rating.icons.svg#star-empty"></use>
      </svg>
       <svg class="star-half">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/images/star-rating.icons.svg#star-half"></use>
      </svg>
      <svg class="star-filled">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/images/star-rating.icons.svg#star-filled"></use>
      </svg>
    </div>
    <div class="star">
      <svg class="star-empty">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/images/star-rating.icons.svg#star-empty"></use>
      </svg>
       <svg class="star-half">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/images/star-rating.icons.svg#star-half"></use>
      </svg>
      <svg class="star-filled">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/images/star-rating.icons.svg#star-filled"></use>
      </svg>
    </div>
    <div class="star">
      <svg class="star-empty">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/images/star-rating.icons.svg#star-empty"></use>
      </svg>
       <svg class="star-half">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/images/star-rating.icons.svg#star-half"></use>
      </svg>
      <svg class="star-filled">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/images/star-rating.icons.svg#star-filled"></use>
      </svg>
    </div>
    <div class="star">
      <svg class="star-empty">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/images/star-rating.icons.svg#star-empty"></use>
      </svg>
       <svg class="star-half">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/images/star-rating.icons.svg#star-half"></use>
      </svg>
      <svg class="star-filled">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/images/star-rating.icons.svg#star-filled"></use>
      </svg>
    </div>
    <div class="star">
      <svg class="star-empty">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/images/star-rating.icons.svg#star-empty"></use>
      </svg>
       <svg class="star-half">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/images/star-rating.icons.svg#star-half"></use>
      </svg>
      <svg class="star-filled">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/images/star-rating.icons.svg#star-filled"></use>
      </svg>
    </div>
  </div>
</div>

5. Customize the size of the stars.

<div class="rating large">
  ...
</div>

<div class="rating small">
  ...
</div>

<div class="rating medium">
  ...
</div>

6. Set the rating value.

<div class="rating value-1">
  ...
</div>

<div class="rating value-2">
  ...
</div>

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

<div class="rating value-4">
  ...
</div>

<div class="rating value-5">
  ...
</div>

7. Use half-star ratings.

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

8. Determine the position of the label.

<div class="rating value-3 label-top">
  <div class="label-value">3.5</div>
</div>

<div class="rating value-3 label-right">
  <div class="label-value">3.5</div>
</div>

<div class="rating value-3 label-left">
  <div class="label-value">3.5</div>
</div>

<div class="rating value-3 label-right">
  <div class="label-value">3.5</div>
</div>

9. Use a custom icon set, e.g. Font Awesome.

<div class="rating custom-icon">
  ...
</div>

10. Position stars with space between the lines.

<div class="rating space-between">
  ...
</div>

11. Change the color of the rating stars.

<div class="rating color-default">
  ...
</div>

<div class="rating color-negative">
  ...
</div>

<div class="rating color-ok">
  ...
</div>

<div class="rating color-positive">
  ...
</div>

<div class="rating disabled">
  ...
</div>

12. Enable RTL mode.

<div class="rating direction-rtl">
  ...
</div>

13. Enable animations on the stars.

<div class="rating immediately">
  ...
</div>

<div class="rating noticeable">
  ...
</div>

<div class="rating slow">
  ...
</div>

14. Apply a theme to the rating system.

5-Star Rating System Google Style

Google Style

5-Star Rating System kununu Style

kununu Style

<div class="rating theme-google-places">
  ...
</div>

<div class="rating theme-kununu">
  ...
</div>

You Might Be Interested In:


Leave a Reply