JSFiddle - React, Tailwind, and code Playground

HTML

<div id='progWrap'>
    <div class='progBar'></div>
    <div class='progBar'></div>
    <div class='progBar'></div>
    <div class='progBar'></div>
    <div class='progBar'></div>
    <div class='progBar'></div>
    <div class='progBar'></div>
</div>

CSS

#progWrap{
    width:90%;
    text-align:left;
}
.progBar{
    height:20px;
    background-color:#66F;
    border:2px solid #00F;
}

JavaScript

function Rand5(){return Math.floor(Math.random() * 5) + 1}
function rand5(){return Math.floor(Math.random() * 5) + 1}

function Rand7(){for(x=0,i=1;i<8;x^=i*((k=Rand5())%2),i*=1+(k<5));return x?x:Rand7()}

var arr=[0,0,0,0,0,0,0],___,n=7E5;
for(___=0;___<n;___++) arr[Rand7()-1]++;
for(___=0;___<7;___++){
    $($('.progBar')[___]).css('width',(100*arr[___]/n)+'%');
}