JSFiddle - React, Tailwind, and code Playground

HTML

<div id="progressbar">
    <div id="progress">
    </div>
</div>
<p> Content Loaded </p>

CSS

#progressbar {
    width: 400px;
    height: 50px;
    background: white;
    border: 1px solid black;
    opacity: 0;
    -webkit-animation: disappear 12s linear;
    -moz-animation: disappear 12s linear;
}
#progress {
    height: 100%;
    width: 100%;
    background: #031482;
    -webkit-animation: width 10s 1 linear;
    -moz-animation: width 10s 1 linear;
    
}
p {
    -webkit-animation: display 13s 1 linear;
    -moz-animation: display 13s 1 linear;
    opacity: 1;
    width: 400px;
    position: absolute;
    top: 0px;
    height: 50px;
    font-family: arial;
    line-height: 50px;
    text-align: center;
}
@-webkit-keyframes display {
    0% { opacity: 0; }
85%{ opacity: 0; }
100%{opacity: 1; }
}
@-moz-keyframes display {
    0% { opacity: 0; }
85%{ opacity: 0; }
100%{opacity: 1; }
}
@-webkit-keyframes width {
    0% { width: 0; }
    100% {width: 100%; }
}
@-moz-keyframes width {
    0% { width: 0; }
    100% {width: 100%; }
}
@-webkit-keyframes disappear {
    0% { opacity: 1; }
    84% { opacity: 1; }
    100% { opacity: 0; }
}
@-moz-keyframes disappear {
    0% { opacity: 1; }
    84% { opacity: 1; }
    100% { opacity: 0; }
}