.backloading {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
}

.vertical_horizontal_center{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100vw;
   height: 100vh;
}

.loader{
   display: block;
   position: relative;
   height: 20px;
   width: 140px;
   background-image: 
   linear-gradient(#FFF 20px, transparent 0), 
   linear-gradient(#FFF 20px, transparent 0), 
   linear-gradient(#FFF 20px, transparent 0), 
   linear-gradient(#FFF 20px, transparent 0);
   background-repeat: no-repeat;
   background-size: 20px auto;
   background-position: 0 0, 40px 0, 80px 0, 120px 0;
   animation: pgfill 1s linear infinite;
}

@keyframes pgfill {
   0% {   background-image: linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
   25% {   background-image: linear-gradient(#09019b 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
   50% {   background-image: linear-gradient(#09019b 20px, transparent 0), linear-gradient(#09019b 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
   75% {   background-image: linear-gradient(#09019b 20px, transparent 0), linear-gradient(#09019b 20px, transparent 0), linear-gradient(#09019b 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
   100% {   background-image: linear-gradient(#09019b 20px, transparent 0), linear-gradient(#09019b 20px, transparent 0), linear-gradient(#09019b 20px, transparent 0), linear-gradient(#09019b 20px, transparent 0); }
}