<div id="page-preloader-gm" class="preloader-gm">
<div class="loader-gm"></div>
</div>
.preloader-gm {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: white;
z-index: 999;
transition: 1s all;
opacity: 1;
visibility: visible;
}
.loader-gm {
width: 75px;
height: 75px;
border: 10px solid black;
border-radius: 50%;
border-top-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: 1s spin infinite linear;
}
.done {
opacity: 0;
visibility: hidden;
}
@keyframes spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.