JSFiddle - React, Tailwind, and code Playground

by Karen Maritz

HTML

<div id="overlay" >
   test


    <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></div>

CSS

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #dcdcdc;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
#loading {
    width: 50px;
    height: 57px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -28px 0 0 -25px;
}

#global{
  position: absolute;
    content:"";
    width: 100%;
    background: rgba(193, 56, 50, 0.7); // Adjust your color
    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{
  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 : translate3d(-220px,0,0)
 ...

JavaScript

function ShowProgress() {
            setTimeout(function () {
                var loading = $(".loading");
                loading.show();
                var overlay = $(".overlay");
                overlay.show();
            }, 200);
        }


        $('form').live("submit", function () {                 
            ShowProgress();
        });
      
        $(window).load(function () {
            $('.loading').hide();
            $('.overlay').hide();
        });