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">
      <style>
       .progressBarLoading[value]::-webkit-progress-value {
                background: rgb(0, 255, 0);
                border-radius: 9px; 
            }
            body {
    background: #c0c0c0;    
}
  
      </style>
               

    </div>

CSS

#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;
}

JavaScript

var interval = 100;
var red = 255;
var green = 0;

function statusFadeOut(v){
  var status = document.getElementById('status');
  v -= 0.1;
  status.style.opacity = v;
  var t = setTimeout('statusFadeOut(' + v + ')', 100);
  if (v < 0.3){
    clearTimeout(t);
  }
}

function progressBarLoad(amount) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  var header = document.getElementById('header');
  var explosion = document.getElementById('explosion');
  status.style.marginLeft = (amount*3) + 'px';
  status.innerHTML = amount+"%";
  bar.value = amount;
  amount++;
  green += 3;
  red -= 3;
  header.style.opacity = amount/100;
  var loadingStyle = document.getElementById('loadingStyle');
            loadingStyle.innerHTML = '<style type="text/css">' +
                '.progressBarLoading[value]::-webkit-progress-value {' +
                'background: rgb('+ red + ', ' + green + ', 0);' +
                'border-radius: 9px; }' +
                '</style>';
    
  var t = setTimeout('progressBarLoad('+amount+')', interval);
  switch (amount){
    case 100:
      status.innerHTML = "100%";
      bar.value = 100;
      clearTimeout(t);
      statusFadeOut(1);
      break;
    case 15:
      interval = 1000;
      break;
    case 20:
      interval = 10;
      break;
    case 48:
      interval = 2000;
      break;
    case 50:
      interval = 100;
      break;
    case 75:
      interval = 10;
      break;
    case 98:
      interval = 2000;
      break;
    }
}

var loaded = 0;
progressBarLoad(loaded);