⭐
⭐
⭐
⭐
⭐
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
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
11 | 50 | 55 | 10 | 41 |
![]() |
![]() |
![]() |
![]() |
![]() |
Related Projects
Css | Angular1 (>=1.5) | Angular (>=2) |
---|---|---|
![]() |
![]() |
![]() |
Css Star Rating | Angular1 Star Rating | Angular Star Rating |
Demo
Install
Get Css Star Rating:
- clone & build this repository
- download as .zip
- via npm: by running
$ npm install css-star-rating
from your console - via bower: by running
$ bower install css-star-rating
from your console
Load library
<link rel="stylesheet" href="bower_components/css-star-rating/dist/css/star-rating.css">
Copy asstes (optional) If you want to use svg as icon type copy the
star-rating.icons.svg
image form bower_components/css-star-rating/dist/images/star-rating.css
to your roots assets folder.
Use it
<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>
compound selector no longer extend
Remove compound selector extends.
Newer versions of Sass, notably the one used by Angular 8, forbid extending compound selectors (http://bit.ly/ExtendCompound). This change makes the library compatible with modern Sass. Verified by comparing the styleguide before and after.
"Half stars" not working although set ".half" class
First of all, thanks for your library. Its awesome and I really like it. But when I tried to your demo as below, although ".half" class is set, rating value does not have a half star at the end.
I also attach output when run above html code.
Did I miss something? Please help me to resolved it.
Thanks and best regards,
chore(deps): bump loader-utils from 2.0.2 to 2.0.3
Bumps loader-utils from 2.0.2 to 2.0.3.
Release notes
Sourced from loader-utils's releases.
Changelog
Sourced from loader-utils's changelog.
Commits
7162619
chore(release): 2.0.3a93cf6f
fix(security): prototype polution exploit (#217)90c7c4b
chore(release): 2.0.28c2d24e
fix: base64 generation and unicode characters (#197)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Support for Angular v9
Error: Uncaught (in promise): Error:
Importing StarRatingModule which does not have a ɵmod property
Is this library deprecated? I don't see any development since years.
Build Warning
I'm submitting a...
[x] Bug report [ ] Feature request
Current behavior
Build warning occurs when building an app that uses this package with the https://github.com/BioPhoton/angular-star-rating package:
Expected behavior
No build warning for invalid animation. This occurs from this line: https://github.com/BioPhoton/css-star-rating/blob/master/dist/scss/_modifiers.scss#L351, which compiles to
transition: all none
1.2.4 - Files are missing
Hello,
I use angular-star-rating which is using css-star-rating. I found that angular-star-rating is working when using [email protected] but has a big problem when compiling [email protected]
This issue appears with version 1.2.4.
As you can see below, version 1.2.4 is missing a lot of files ! (both versions are downloaded by npm)
1.2.4 css-star-rating's content (Doesn't Work)
1.1.3 css-star-rating's content (Works well !)
Can you fix it please ? Thank you for your work. :)
Have a nice day !
Update package.json main to point to dist css file
package.json's
main
currently points to the non-existant dist/index.js file. The real main entry point for css-star-rating is the css file itself. By setting that to the main, it can be easily integrated with projects that support loading node modules (such as by using WebPack) as a simple@import 'css-star-rating'
.Add clear element
Add visual element for clearing the stars.
NOTE: Even if this is no interactive element it will implemented here in terms of layout and design. This is the base to make it interactive in JavaScript based implementations of this lib.
Mark Range variables as Default
Allows range variables (specifically maxNumOfStars) to be overridden by the importing SCSS file.
Fixes https://github.com/BioPhoton/angular-star-rating/issues/61
chore(deps): bump json5 from 2.2.0 to 2.2.3
Bumps json5 from 2.2.0 to 2.2.3.
Release notes
Sourced from json5's releases.
Changelog
Sourced from json5's changelog.
Commits
c3a7524
2.2.394fd06d
docs: update CHANGELOG for v2.2.33b8cebf
docs(security): use GitHub security advisoriesf0fd9e1
docs: publish a security policy6a91a05
docs(template): bug -> bug report14f8cb1
2.2.210cc7ca
docs: update CHANGELOG for v2.2.27774c10
fix: add proto to objects and arraysedde30a
Readme: slight tweak to intro97286f8
Improve example in readmeDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.
Release notes
Sourced from decode-uri-component's releases.
Commits
a0eea46
0.2.2980e0bf
Prevent overwriting previously decoded tokens3c8a373
0.2.176abc93
Switch to GitHub workflows746ca5d
Fix issue where decode throws - fixes #6486d7e2
Update license (#1)a650457
Tidelift tasks66e1c28
Meta tweaksDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
chore(deps): bump loader-utils from 2.0.2 to 2.0.4
Bumps loader-utils from 2.0.2 to 2.0.4.
Release notes
Sourced from loader-utils's releases.
Changelog
Sourced from loader-utils's changelog.
Commits
6688b50
chore(release): 2.0.4ac09944
fix: ReDoS problem (#225)7162619
chore(release): 2.0.3a93cf6f
fix(security): prototype polution exploit (#217)90c7c4b
chore(release): 2.0.28c2d24e
fix: base64 generation and unicode characters (#197)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
chore(deps): bump terser from 5.12.1 to 5.14.2
Bumps terser from 5.12.1 to 5.14.2.
Changelog
Sourced from terser's changelog.
Commits
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Half star rating is not working
.half class not working for the half star rating. It gives me the full star rating. Here is the code below.
Add "bp-" prefix to prevent class collapse #9
I test it using the styleguide 🍕😄
But the
dist
folder also has the same files ofsrc
, I've don't know if it is a problem.Can you test it? @BioPhoton