JSFiddle - React, Tailwind, and code Playground

by Anu Vidhya

HTML

<div id="header">
            <img src="http://teamtreehouse.com/assets/new-marketing/th-logo-white.png"/>
        </div>
    <div id="container">
        <div id="bar">
            <progress id="progressBar" class="progressBarLoading" max="100" value="0"></progress>
            <span id="status">0%</span> 
        </div>
    </div>
    <div id="loadingStyle">
      
               

    </div>

CSS

.progressBarLoading[value]::-webkit-progress-value {
                background: rgb(0, 255, 0);
                border-radius: 9px; 
            }
            body {
    background: #c0c0c0;    
}
  
#container {
    width: 300px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}
            
#explosions {
    height: 18px;
}
            
#header {
    width: 390px;
    height: 80px;
    opacity: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}
            
#progressBar {
    -webkit-appearance: none;
     appearance: none;
     width: 300px;
     height: 20px;
}
            
#progressBar[value]::-webkit-progress-bar {
     background-color: #ccc;
     border-radius: 9px;
     box-shadow: 0 2px 1px rgba(0, 0, 0, 0.35) inset;
}
            
#status {
     display: inline-block;
     font-family: sans-serif;
     font-size: 12px;  
     color: #fff;
     margin-bottom: 5px;
     width: 39px;
}