JSFiddle - React, Tailwind, and code Playground

by BoxMan0617

HTML

<p>Blakjabckjsdc ksd jcksjd ckshd cks dckla sdcj asdlc</p>

CSS

.loading_box {
  position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	z-index: 10000;
}

.loading_box .inner_box {
  position: absolute;
  left: -50px;
  height: 50px;
  width: 50px;
  background-color: #00cbff;
  -webkit-box-shadow: 0px 0px 30px -2px #FFF;
  box-shadow: 0px 0px 30px -2px #FFF;
}

JavaScript

$(document).ready(function(){
  var main_box = $('<div></div>', {
    'class': 'loading_box',
    'css': {
      'display': 'none'
    }
  }).appendTo($('body'));
  var mHeight = $(main_box).css('height');
  var mWidth = $(main_box).css('width');
  mHeight.substring(0, mHeight.length -2);
  
  function CreateNewBox() {
    $(main_box).append($('<div></div>', {
      'class': 'inner_box',
      'css': {
        'top': (parseInt(mHeight)/2)+'px'
      }
    }).animate(
      {'left': mWidth}, {
        'queue': false, 
        'duration': 3000,
        'complete': function() {
          $(this).remove();
        }
      }
    ));
  }
  
  $(main_box).fadeIn(1000, function(){
    startLoading();
  });
  
  var loading = false;
  function startLoading() {
    loading = true;
    CreateNewBox();
    setTimeout(function(){CreateNewBox();}, 500);
    setTimeout(function(){CreateNewBox();}, 1000);
    setTimeout(function(){CreateNewBox();}, 1500);
    
    setTimeout(function(){continueLoading();}, 4500);
  }
  
  function continueLoading() {
    CreateNewBox();
    setTimeout(function(){CreateNewBox();}, 500);
    setTimeout(function(){CreateNewBox();}, 1000);
    setTimeout(function(){CreateNewBox();}, 1500);
    
    if(loading)
      setTimeout(function(){continueLoading();}, 4500);
  }
  
  function stopLoading() {
    loading = false;
    $(main_box).fadeOut(1000);
  }
  
  setTimeout(function(){stopLoading();}, 22500);
});