Skip to main content
1 de 2
LeAndrade
  • 9mil
  • 11
  • 29
  • 52

Cara confesso que não entendi bem o seu HTML, mas, deixo aqui uma resposta espero que te ajude a te dar um norte aí:

$(function() {
    
    $('.ratingAverage').each(function(index) {
      var average = $(this).attr('data-average');
      average = average * 20;
      
      $('.bg').css('width', 0);
      
      if(index == 0) {
        $('.bg:eq(0)').animate({
          width: average + '%'
        }, 500);
      } else if(index == 1) {
        $('.bg:eq(1)').animate({
          width: average + '%'
        }, 500);
      } else if(index == 2) {
        $('.bg:eq(2)').animate({
          width: average + '%'
        }, 500);
      }

    })

});
.bg{background-color: yellow}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col col-12">
<div class="about">
   <span class="ratingAverage" data-average="1.2"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg">1</span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

<div class="col col-12">
<div class="about">
 <span class="ratingAverage" data-average="4.2"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg">2</span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

<div class="col col-12">
 <div class="about">
  <span class="ratingAverage" data-average="5.6"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg">3</span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

LeAndrade
  • 9mil
  • 11
  • 29
  • 52