JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="progressIndicatorBackground" class="visuallyhidden">Loading bar
</div>
</body>
CSS
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
#progressIndicatorBackground{
width:200px;
height:20px;
background-color:red;
text-align:center;
}
JavaScript
function progressIndicator(value) {
$("#progressIndicatorBackground").toggleClass("visuallyhidden");
console.log('loading');
setTimeout(function() {
$("#progressIndicatorBackground").toggleClass("visuallyhidden");
}, 5000);
console.log('loaded');
}
progressIndicator(0);