preloader.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*!------------------Outermost Loader Container-------------------------*/
#loader_fixed_container{
    position: fixed;
    z-index: 9999999 ;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    opacity: 1;
}
/*!-------------------------------Loader Container-------------------------*/ 
.loader_container{
    position: relative;
    background-color: #343a40;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

/*!----------------------------------------------------------*/
  /*!----------------------------Website logo Image------------------------------*/
  .web_logo{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    height: 300px;
    position: absolute;
}
  .border_loader{
    width: 300px;            
    height: 300px;
    border-radius: 50%;
    animation: rotateAnimate 4s infinite linear;
  }
    .border_loader::before{
        content: " ";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border: 3px solid transparent;
        border-top: 3px solid #fff;
        border-right: 3px solid #fff;
        border-radius: 50%;
    }.border_loader::after{
        content: "";
        position: absolute;
        top:41px;
        left: 43px;
        transform: translateX(-50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: white;
        z-index: 10;
        box-shadow: 0 0 10px white,
                    0 0 20px white,
                    0 0 30px white,
                    0 0 40px white,
                    0 0 50px white;
                    
    }
 /* img #website_logo{
    position: absolute;
    opacity: .2;
    border-radius: 50%;
    box-shadow: 0px 0px 16px rgba(255, 255, 255, .3);
    backdrop-filter: blur(16px);
    z-index: 9999 !important;
} */
@keyframes rotateAnimate {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(-360deg);
    }
    
}
/*!----------------------------------------------------------*/
/*!----------------------Text Animation-----------------------*/
.loader_content{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 300px;
    width: 300px;
}
.loading_process{
    font-size: 25px;
    color: white;
    font-family:cursive;
    font-weight: bold;
    margin-left: none;
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.644);
    
  }
  .dots .dot1{
    animation:dotBlink .4s infinite linear;
    transition: opacity .3s linear;
    opacity: 0;
  }
  .dots .dot2{
    animation:dotBlink .4s infinite linear;
    animation-delay: .2s;
    transition: opacity .3s linear;
    opacity: 0;
  }
  .dots .dot3{
    animation:dotBlink .4s infinite linear;
    animation-delay: .4s;
    transition: opacity .3s linear;
    opacity: 0;
  }
  @keyframes dotBlink {
    0%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }
/*!----------------------------------------------------------*/
/*!-----------------------Hourglass Animation-----------------------------------*/
#hourglass_svg_loader {
    
    text-align: center;
 }
 
 @keyframes top-clip {
     0%{}
     50%{transform: translateY(21px);}
     100%{transform: translateY(21px);}
 }
 
 @keyframes bottom-sand-path {
     0%{}
     50%{transform: translateY(0);}
     100%{transform: translateY(0);}
 }
 
 @keyframes bottom-sand-g {
     0%{}
     85%{transform: translateY(0);}
     100%{transform: translateY(-9px);}
 }
 
 @keyframes hourglass-rotation {
     50%{transform: rotateZ(0);}
     100%{transform: rotateZ(180deg);}
 }
 
 
 #top-sand #top-clip-path rect,
 #bottom-sand path,
 #bottom-sand g,
   svg {
     animation-duration: 5s;
     animation-delay: 1s;
     animation-iteration-count: infinite;
 }
 svg{
     filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.9));
 }
 #top-sand #top-clip-path rect {
     animation-name: top-clip;
 }
 
 #bottom-sand path {
     transform: translateY(21px);
     animation-name: bottom-sand-path;
 }
 
 #bottom-sand g {
     animation-name: bottom-sand-g;
 }
 
 svg {
     animation-name: hourglass-rotation;
 }
 /*!------------------------------------------------------*/