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í:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $(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);
          }

        })

    });

<!-- language: lang-css -->

    .bg{background-color: yellow}

<!-- language: lang-html -->

    <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>

<!-- end snippet -->