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>