.loader_wrapper {
    position: fixed !important;
    background: black;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: block;
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader 
{ 
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
position: absolute;

z-index: 999;
}
.loader .loader-inner-1,
.loader .loader-inner-2,
.loader .loader-inner-3,
.loader .loader-inner-4

{
display: block;
width: 20px;
height: 20px;
border-radius: 20px;
position: absolute;

}
.loader .loader-inner-1:before,
.loader .loader-inner-2:before,
.loader .loader-inner-3:before,
.loader .loader-inner-4:before

{
content:"";
display: block;
width: 20px;
height: 20px;
border-radius: 20px;
position: absolute;
right: 0;
animation-name: loading-1;
animation-iteration-count: infinite;
animation-direction: normal;
animation-duration: 2s;

}

.loader .loader-inner-1
{
top: 0;
left: 0;
transform: rotate(70deg);
}

.loader .loader-inner-1:before
{
 background: white;
}

.loader .loader-inner-2
{
top: 0;
right: 0;
transform: rotate(160deg);
}

.loader .loader-inner-2:before
{
 background: #F14854;
}

.loader .loader-inner-3
{
bottom: 0;
right: 0;
transform: rotate(-110deg);
}

.loader .loader-inner-3:before
{
 background: white;
}

.loader .loader-inner-4
{
bottom: 0;
left: 0;
transform: rotate(-20deg);
}

.loader .loader-inner-4:before
{
 background:#F14854;
}
@keyframes loading-1 
{
  0% 
  {
    width: 20px;
    right: 0;
  }
  
  30% 
  {
    width: 120px;
    right: -100px;
  }

  60% 
  {
    width: 20px;
    right: -100px;
  }

 }