<style type="text/css">

   body{

    padding:0;

    margin:0;

}

      #loadingpage{

  position: relative;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  z-index: 1;

  background-color: rgba(0, 0, 0, 0.9);display: block

}

  .loader-theme5 {

  color:white;

  font-family:sans-serif;

  left:50%;

  overflow-x:hidden;

  padding-top:7vh;

  position:absolute;

  text-align:center;

  top:50%;

  transform:translate(-50%,-50%);

  width:80%;

  &:before {

    animation:left-to-right 3s alternate infinite linear;

    background-image:linear-gradient(to right, transparent, red, transparent);

    // bottom:0;

    content:"";

    height:5vh;

    left:0;

    overflow:hidden;

    position:absolute;

    right:0;

    top:0;

  }

  &:after {

   /* background-image:repeating-linear-gradient(

      90deg,

      white,

      white 1vw,

      transparent 1vw,

      transparent 10vw

    );*/

    content:"";

    height:5vh;

    left:0;

    overflow:hidden;

    position:absolute;

    right:0;

    top:0;

  }

}



@keyframes left-to-right {

  0% {

    transform:translateX(-100%);

  }

  100% {

    transform:translateX(100%);

  }

}

</style>



<div id="loadingpage" style="display: block;">

<div class="loader-theme5"><h3 style="color:white;">Cargando...</h3></div>

</div>