JSFiddle - React, Tailwind, and code Playground

by Karen Maritz

HTML

<div id="overlay" >
   
</div>

    <div class="loading" align="center">
        <div id="global">

    <div id="top" class="mask">
      <div class="plane"></div>
    </div>
    <div id="middle" class="mask">
      <div class="plane"></div>
    </div>

    <div id="bottom" class="mask">
      <div class="plane"></div>
    </div>
    
  <p><i>LOADING...</i></p>
    
    </div>
    </div>

CSS

.body {
  padding: 0px;
  height:100%;
  width:100%;
    background-color:#EBEBEB;
    filter:alpha(opacity=70);
    opacity:0.7;
}

.overlay {
  padding: 0px;
  height:100%;
  width:100%;
    background-color:#EBEBEB;
    filter:alpha(opacity=70);
    opacity:0.7;
}

#global{
     opacity:200;
  position: absolute;
    content:"";
    width: 100%;
    /*background: rgba(193, 56, 50, 0.7);*/
     /*background-color:#EBEBEB;*/
    height: 100%;
    left: 50%;
    top: 50%;
    z-index:-1;
}



.mask{
  position:absolute;
  border-radius:2px;
  overflow:hidden;
   perspective: 1000;
  backface-visibility: hidden;
}

.plane{
  background:#d20202;
  width:400%;
  height:100%;
  position:absolute;
  transform : translate3d(0px,0,0);
  /*transition: all 0.8s ease; */
  z-index:100;
  perspective: 1000;
  backface-visibility: hidden;
  
}
 
.animation{
  transition: all 0.3s ease;
}


 
#top .plane{
  z-index:2000;
  animation : trans1 1.3s ease-in infinite  0s backwards;
}
#middle .plane{
  transform : translate3d(0px,0,0);  
  background : #bbbbbb;
  animation : trans2 1.3s linear infinite  0.3s  backwards;

}
#bottom .plane{
  z-index:2000;
  animation : trans3 1.3s ease-out infinite  0.7s backwards;
}



#top{
  width:53px;
  height:20px;
  left:20px;
  transform: skew(-15deg, 0);
  z-index:100;
}

#middle{
  width:33px;
  height:20px;
  left:20px;
  top:15px;
  
  transform: skew(-15deg, 40deg)
}
#bottom{
  width:53px;
  height:20px;
  top:30px;  
  transform: skew(-15deg, 0)
}

p{
     opacity:200;
  color:#000;
  position:absolute;
  left: -3px;
  top:45px;
  font-family:Arial;
  text-align:center;
  font-size:10px;
}

@keyframes trans1{ 
  from { 
    transform : translate3d(53px,0,0)
  }
  to { 
    transform : translate3d(-250px,0,0)
  }
}

@keyframes trans2{ 
  from { 
    transform : translate3d(-160px,0,0)
  }
  to { 
    transform : translate3d(53px,0,0)
  }
}

@keyframes trans3{ 
  from { 
    transform : translate3d(53px,0,0)
  }
  to { 
    transform :...

JavaScript

function ShowProgress() {
            setTimeout(function () {
                var loading = $(".global");
                loading.show();
                $('#overlay').css({ 'display': 'block', opacity: 0.7, 'width': $(document).width(), 'height': $(document).height() });
                $('body').css({ 'overflow': 'hidden' });
                $('#global').css({ 'display': 'block' }).click(function () { $(this).css('display', 'none'); $('#screen').css('display', 'none') });
            }, 200);
            $('#global').dialog({ modal: true });
        }


        $('form').live("submit", function () {
            $(".overlay").show();
            ShowProgress();
        });

        $(document).ready(function () {
            $('.loading').hide();
        });