JSFiddle - React, Tailwind, and code Playground

HTML

<div id="meter">
<p id="bar"><span></span></p>
<p id="now">now loading...</p><p id="percent"></p>
</div>

CSS

#meter {

    width: 200px;
    height: 30px;

}


#now {


    text-align: center;
    font-size: 15px;

    font-family: arial;
    font-weight: bold;

    color: black;

}

#percent {

    text-align: center;
    font-size: 15px;

    font-family: arial;
    font-weight: bold;

    color: black;

}


#bar {

    width: 200px;
    height: 15px;

    text-align: center;

    border:2px solid #ffffff;
    background: #00FF00;

    -webkit-border-radius: 20px;
    -ms-border-radius: 20px;

}

#bar span{

    background: #00FF00;
    display: block;
    height: 15px;


    -webkit-border-radius: 20px;
    -ms-border-radius: 20px;

}

JavaScript

$(document).ready(function() {

	var xhr = new XMLHttpRequest
	xhr.open('GET', 'index.html');
	xhr.onprogress = function (evt) {

	var load = (100*evt.loaded/evt.total|0);
	$('#percent').html(load + '%');
	$('#bar span').css({'width': load*2});
	};

	xhr.send();

});