Bootstrap Snippet CodePen Home WooCommerce CSS SVG Star Rating using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="wrapper">
  <h2 class="text-center">WooCommerce SVG Star Rating</h2>
  <p class="text-center">Retina ready and easy customizable</p>
  <div class="star-rating">
    <span style="width:0%"></span>
  </div>
  <div class="star-rating">
    <span style="width:20.6%"></span>
  </div>
  <div class="star-rating">
    <span style="width:72%"></span>
  </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.star-rating {
  height: 20px;
  position: relative;
  width: 100px;
  margin: 0 auto;
}
.star-rating:before {
  background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22929%22%20height%3D%22886%22%20viewBox%3D%220%200%20929%20886%22%3E%3Cstyle%3Epath%20%7B%20fill%3A%20%23e8e8e8%20!important%20%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M929%20343c0%208-5%2017-15%2027L711%20567l48%20279c1%203%201%207%201%2012%200%2015-8%2027-22%2027-7%201-15-1-23-6L464%20747%20214%20879c-9%205-16%207-23%207-14%200-23-15-23-28%200-3%200-7%201-12l48-279L14%20370c-9-10-14-19-14-27%200-14%2010-23%2031-26l280-40L437%2023c7-15%2016-23%2027-23s20%208%2028%2023l125%20254%20280%2040c21%203%2032%2012%2032%2026z%22%2F%3E%3C%2Fsvg%3E) !important;
  background-repeat: repeat-x;
  background-size: 20px;
  bottom: 0;
  content: "";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}
.star-rating > span {
  display: block;
  text-indent: -10000px;
  width: 100px;
  height: 20px;
  position: absolute;
  overflow: hidden;
}
.star-rating > span:before {
  background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22929%22%20height%3D%22886%22%20viewBox%3D%220%200%20929%20886%22%3E%3Cstyle%3Epath%20%7B%20fill%3A%20%23ffe34d%20!important%20%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M929%20343c0%208-5%2017-15%2027L711%20567l48%20279c1%203%201%207%201%2012%200%2015-8%2027-22%2027-7%201-15-1-23-6L464%20747%20214%20879c-9%205-16%207-23%207-14%200-23-15-23-28%200-3%200-7%201-12l48-279L14%20370c-9-10-14-19-14-27%200-14%2010-23%2031-26l280-40L437%2023c7-15%2016-23%2027-23s20%208%2028%2023l125%20254%20280%2040c21%203%2032%2012%2032%2026z%22%2F%3E%3C%2Fsvg%3E) !important;
  background-repeat: repeat-x;
  background-size: 20px;
  bottom: 0;
  content: "";
  display: block;
  height: 20px;
  left: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"CodePen Home WooCommerce CSS SVG Star Rating"
Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"CodePen Home WooCommerce CSS SVG Star Rating" Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"CodePen Home WooCommerce CSS SVG Star Rating"
Bootstrap 4.1.1 Snippet by tieusuquay79