<style type="text/css">

	    #loadingpage{

  position: fixed;

  /*position: relative;*/

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  z-index: 10000;

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

}

  .loader {

  color:white;

  font-weight: bold;

  font-size: 2em;

  left:50%;

  overflow-x:hidden;

  padding-top:7vh;

  position:absolute;

  text-align:center;

  top:50%;

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

  width:50vw;

  &: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">Cargando...</div>

</div>