<div class="star-ratings-input">
  <h2>Rating Input 1</h2>
  <input type="radio" id="one-star" value="1" name="star-rating" checked/>
  <input type="radio" id="two-star" value="2" name="star-rating"/>
  <input type="radio" id="three-star" value="3" name="star-rating"/>
  <input type="radio" id="four-star" value="4" name="star-rating"/>
  <input type="radio" id="five-star" value="5" name="star-rating"/>
  <div class="stars">
    <label for="five-star" class="fas fa-star"></label>
    <label for="four-star" class="fas fa-star"></label>
    <label for="three-star" class="fas fa-star"></label>
    <label for="two-star" class="fas fa-star"></label>
    <label for="one-star" class="fas fa-star"></label>
  </div>
</div>
<div class="star-ratings-input">
  <h2>Rating Input 2</h2>
  <input type="radio" id="one-star-two" value="1" name="star-rating-two" checked/>
  <input type="radio" id="two-star-two" value="2" name="star-rating-two"/>
  <input type="radio" id="three-star-two" value="3" name="star-rating-two"/>
  <input type="radio" id="four-star-two" value="4" name="star-rating-two"/>
  <input type="radio" id="five-star-two" value="5" name="star-rating-two"/>
  <div class="stars">
    <label for="five-star-two" class="fas fa-star"></label>
    <label for="four-star-two" class="fas fa-star"></label>
    <label for="three-star-two" class="fas fa-star"></label>
    <label for="two-star-two" class="fas fa-star"></label>
    <label for="one-star-two" class="fas fa-star"></label>
  </div>
</div>

<div class="star-ratings-average">
  <h2>Average Rating</h2>
  <!-- uses background-size to show the percentage -->
  <div class="stars">
    <div class="fas fa-star"></div>
    <div class="fas fa-star"></div>
    <div class="fas fa-star"></div>
    <div class="fas fa-star"></div>
    <div class="fas fa-star"></div>
  </div>
</div>

html,body {
  height:100%;
  min-height:100%;
  font-family:"Helvetica","Arial",sans-serif;
}

body {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

h2 {
  text-align:center;
  margin:5px 0;
}

.star-ratings-input {
  padding-bottom:20px;
  // hides actual radios, while keeping them functional
  input {
    width:0;
    height:0;
    position:absolute;
    opacity:0;
  }
}

.star-ratings-average {
  .stars {
    display:block;
    letter-spacing:0;
    flex-direction:row;
    background-image: linear-gradient(orange,orange);
    background-size:0% 100%;
    background-repeat:no-repeat;
    -webkit-background-clip: text;
    background-color:lightgray;
    transition:.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
    > div {
      display:inline;
      padding:0;
    -webkit-text-fill-color: transparent;
      &:hover {
        color: lightgray;
      }
    }
  }
}

[name*="star-rating"]{
  &[value="1"]:checked {
    ~ .stars *:nth-child(5){
      animation:pulse .25s ease-in-out forwards;
    }
  }
  &[value="2"]:checked {
    ~ .stars {
      *:nth-child(n + 4):nth-child(-n+5){
        animation:pulse .25s ease-in-out forwards;
      }
    }
  }
  &[value="3"]:checked {
    ~ .stars {
      *:nth-child(n + 3):nth-child(-n+5){
        animation:pulse .25s ease-in-out forwards;
      }
    }
  }
  &[value="4"]:checked {
    ~ .stars {
      *:nth-child(n + 2):nth-child(-n+5){
        animation:pulse .25s ease-in-out forwards;
      }
    }
  }
  &[value="5"]:checked {
    ~ .stars {
      *:nth-child(-n+5){
        animation:pulse .25s ease-in-out forwards;
      }
    }
  }
}

.stars {
  display:flex;
  flex-direction:row-reverse;
  color: lightgray;
  label,div {
    font-size:20px;
    padding:0 2px;
    &:hover {
      color:gray;
      ~ label {
        color:gray;
      }
    }
    &:nth-child(5){
      animation-delay:0;
    }
    &:nth-child(4){
      animation-delay:.05s !important;
    }
    &:nth-child(3){
      animation-delay:.1s !important;
    }
    &:nth-child(2){
      animation-delay:.15s !important;
    }
    &:nth-child(1){
      animation-delay:.2s !important;
    }
  }
}

@keyframes pulse {
  0% {
    transform:scale(1);
    color:gray;
  }
  50% {
    transform:scale(1.3);
    color:orange;
  }
  100% {
    transform:scale(1);
    -webkit-text-fill-color:orange;
    -webkit-text-stroke-color: darken(orange,20);
  }
}

$(document).ready(function(){
  
  var total = 0;
  var totalRatingsInputs = $('.star-ratings-input').length
  
  $('.star-ratings-input input:checked').each(function(){
    total += parseInt($(this).val());
  })
  
  // set initial percentage
  var percentage = 100 * (total / (totalRatingsInputs * 5));
  
  $('.star-ratings-average .stars').css('background-size',percentage+'% 100%');
  
  $('.star-ratings-input input').on('click',function(){
    var total = 0;
    $('.star-ratings-input input:checked').each(function(){
      total += parseInt($(this).val());
    })
    
    var percentage = 100 * (total / (totalRatingsInputs * 5));
  
    $('.star-ratings-average .stars').css('background-size',percentage+'% 100%');
  })
  
})