#preload{
display:block;
height:100vh;
width:100%;
position:relative;
background-color: #7D0552;
background-clip: padding-box;
}
#loader1{
position:absolute;
left:38vw;
top:32vh;
justify-content: center;
transition: 0.3s linear;
}
#loader2{position:absolute;}

#loader2{
width: 10vw;
height: 10vw;
position:absolute;
top:42vh;
left:42vw;
border: 1vw dotted yellow;
border-radius: 50%;
display: inline-block;
-webkit-animation: rotation 2s linear infinite;
animation: rotation 2s linear infinite;
}

@-webkit-keyframes rotation {
0% { transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}

.load1{
font-size: 5vw;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: yellow;
position: relative;

}
.load1::before {
content: "";
position: absolute;
left: 3vw;
bottom: 1vw;
width: 2vw;
height: 2vw;
border-radius: 50%;
border: 0.4vw solid yellow;
border-bottom-color: #C11B17;
-webkit-animation: rotation 0.6s linear infinite;
animation : rotation 0.6s linear infinite;
}

@media(max-width:800px){
#loader1{
left:38vw;
top:50vh;
}
#loader2{
width: 15vw;
height: 15vw;
top:35vh;
left:40vw;
border: 1vh dotted yellow;
}
}