JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<body>
        <div id="loading-bar">
          <div id="inner"></div>
        </div>
      </div>
</body>

CSS

#loader {
  -webkit-transition: 0.33s ease-in-out;
  -moz-transition: 0.33s ease-in-out;
  -o-transition: 0.33s ease-in-out;
  transition: 0.33s ease-in-out;
  z-index: 10000;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #ed1651;
  text-align: center;
  padding-top: 25%;
  color: #fff;
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 50px; }
  #loader #loading-bar {
    width: 50%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 25%; }
    #loader #loading-bar #inner {
      -webkit-transition: 0.25s ease-in-out;
      -moz-transition: 0.25s ease-in-out;
      -o-transition: 0.25s ease-in-out;
      transition: 0.25s ease-in-out;
      background-color: white;
      display: block;
      height: 1px;
      width: 0; }

body.loading #loader {
  opacity: 1; }

body.loaded #loader {
  opacity: 0;
  pointer-events: none; }

JavaScript

$(window).load(function() {
    "use strict";

    clearInterval(timer);
    var inner = document.getElementById('inner');        
    inner.setAttribute("style", "width:"+ 100 +"%");

    setTimeout(function(){
        $("body").addClass("loaded");
        $("body").removeClass("loading");    
    }, 500);

});