JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

CSS

.preLoader{
    height:20px;
    width:200px;
    display:block;
    margin:0px auto;
    border:1px solid black;
    position:relative;
}
.subdiv{
    height:100%;
    background:orange;
    display:inline-block;
    -webkit-animation-name: loader;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes loader{
        0%{     width: 0px;   }
        8.32%{  width: 8.32%;   }
        
        8.33%{  width: 8.33%;  }
        16.65%{ width: 16.65%;  }
      
        16.66%{ width: 16.66%;  }
        24.99%{ width: 24.99%;  }
      
        25%{    width: 25%;  }
        33.32%{ width: 33.32%;  }
        
        33.33%{ width: 33.33%; }
        41.65%{ width: 41.65%; }
        
        41.66%{ width: 41.66%; }
        49.99%{ width: 49.99%; }
        
        50%{    width: 50%; }
        58.32%{ width: 58.32%; }
        
        58.33%{ width: 58.33%; }
        66.65%{ width: 66.65%; }
        
        66.66%{ width: 66.66%; }
        74.99%{ width: 74.99%; }
        
        75%{    width: 75%; }
        83.32%{ width: 83.32%; }
        
        83.33%{ width: 83.33%; }
        91.65%{ width: 91.65%; }
        
        91.66%{ width: 91.66%; }
        100%{   width: 100%; }
      }

JavaScript

$(document).ready(function(){
    $(".preLoader").remove();
    $("body").wrapInner($("<div/>",{'class':'preLoader'}).css({top:($("body")[0].scrollHeight/2)-10}));
    $(".preLoader").html($('<div/>',{'class':'subdiv'}));
    $(window).bind('resize',function(){
        $(".preLoader").remove();
        $("body").wrapInner($("<div/>",{'class':'preLoader'}).css({top:($("body")[0].scrollHeight/2)-10}));
        $(".preLoader").html($('<div/>',{'class':'subdiv'}));
    })
});