.preloader {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
--first-color: #6ca9e0;
--second-color: #fdb812;
--third-color: #cb6053;
--thinckness: 3px;
--duration: 1s;

left: 0;
top: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 99999;
}

.preloader-content{
    position: relative;
    width:200px;
    height: 200px;
}
 .preloader-first,
 .preloader-second,
 .preloader-third{
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     animation: var(--duration) linear infinite;
 }

 .preloader-second{
     border-right: var(--thinckness) solid var(--second-color);
     animation-name: second;
 }
  .preloader-first{
     border-bottom: var(--thinckness) solid var(--first-color);
     animation-name: first;
 }
  .preloader-third{
     border-top: var(--thinckness) solid var(--third-color);
     animation-name: third;
 }
 
 @keyframes first{
     0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);}
     100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);}
 }
 @keyframes second{
     0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);}
     100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);}
 }
 
 @keyframes third{
     0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);}
     100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);}
 }

.loaded_hiding .preloader {
  transition: 0.3s opacity;
  opacity: 0;
}

.loaded .preloader {
  display: none;
}