Customizable 5-Star Rating System In Pure CSS/SCSS

Demo Download

Author:	BioPhoton
Views Total:	1,756 views
Official Page:	Go to website
Last Update:	June 6, 2022
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.

Google Style

kununu Style

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

Changelog:

v1.3.1 (06/06/2022)

feat: add support for newer versions of dart sass

v1.3.0 (03/21/2022)

Fixed starType example
Fix formatting of markdown headlines
Update package.json main to point to dist css file
fix(KSS docs): Implemented KSS docs hosted on github from docs folder
Fix path to main dist css file in package.json
Mark Range variables as Default
Fixed README image
chore: upgrade dependencies and fix compilation errors

Customizable 5-Star Rating System In Pure CSS/SCSS

Preview:

Description:

Key features:

How to use it:

Changelog:

See Also:

You Might Be Interested In:

Leave a Reply Cancel reply