Author: | BioPhoton |
---|---|
Views Total: | 2,041 views |
Official Page: | Go to website |
Last Update: | June 6, 2022 |
License: | MIT |
Preview:

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