'Star Shaped Progress Bars in Css, html, javascript

So I have a progress bar that I've been working with on my site. Code below:

CSS: 

#ProgressBar {
position: relative;
width: 100%;
height: 10px;
background-color: #ddd;
border-radius: 25px; 
font-size:18px;
}
#Progress {
position: absolute;
height: 100%;
background-color: #4CAF50;
border-radius: 25px; 
}

HTML: 

<div Id="ProgressBar">
<div Id="Progress" style="width: <?php echo $Variable; ?>%;"></div>.
</br>
</div>

The PHP inside of the style pulls down a number from my SQL database and displays how much percentage has been filled for the progress bar.

I'd like to make progress bar, but instead of the bar I'd like to have stars. So kind of like a rating system. I tried taking a simple rating system like this:

CSS: 

.star span:before {
content: "\2605";
position: absolute;
width: 40%;
background-color:#339966;
}

HTML: 

<div class="star">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span>.<span>☆</span>
</div>

I have no clue how to combine this where I can fill it to a certain percentage like I did with the original progress bar. Any help would be appreciated.

javascriptphpjqueryhtmlcss


Solution 1:[1]

You can set a background of repeating stars to #inner div. Then place another div with white background on top of this div to hide a portion of the stars background.

Give #overlay div a width with your PHP code.

Note that if you want to show a progress of 40% complete, you have to give a 60% width to the #overlay div because it is right positioned.

#outer {
  position: absolute;
  width: 250px;
  height: 16px;
  border: 1px solid #d8d8d8;
}

#inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/2e/Star.png');
  background-repeat: repeat;  
  z-index: 5;
}

#overlay {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 10;
} 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
  <div id="overlay" style="width:60%"></div>
  <div id="inner"></div>
</div>

Solution 2:[2]

You can use three Divs. The outside Div will have a width of 106PX. The middle Div will have the background set to white, or whatever your background color is, and width set to whatever % you would want, and overflow set to hidden. The third inside Div will have a width set to 120px. I used Font Awesome Icons For the stars. If you change the size of the icons, you will have to adjust the width of the Outside Div, .star-container, and the Inside Div, .stair

.star-container {
  width: 106px;
}

.star-icons {
  background: #fff;
  width: 90%;
  overflow: hidden;
}

.star {
  width: 120px;
}
<!-- Font-Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />

<!-- Stars -->
<div class="star-container">
    <div class="star-icons">
      <div class="star">
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
      </div>
    </div>
  </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kapantzak
Solution 2

Related Questions