.PreLoaderBox {
    position: fixed; top: 0; left: 0; width: 100% ; height: 100vh ; background-color: rgba(0, 0, 0, 0.5) ; color: white; z-index: 1000000 ;
    display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 1.5rem ;
}

.PreLoaderCommon {
    width: 70px; height: 70px; border-radius: 50%; border: solid 3px rgba(0, 0, 0, 0) ; 
    border-top: solid 3px rgb(255, 255, 255);
    border-right: solid 3px rgb(255, 255, 255);
    /* border-left: solid 3px rgb(255, 255, 255); */
}
.PreLoader {
    animation: spin 1.2s linear infinite ;
    -webkit-animation:  spin 1.2s linear infinite ;
}
.PreLoader2 {
    animation: spin 1s linear infinite ;
    -webkit-animation:  spin 1s linear infinite ;
}
.PreLoader3 {
    animation: spin2 0.7s linear infinite ;
    -webkit-animation:  spin2 0.7s linear infinite ;
}

.PreLoaderRefreshBtnBox { position: absolute ; bottom: 20vh ; left: 0 ; display: flex ; justify-content: center ; }
.PreLoaderRefreshBtn{ text-align: center ; color: white ; padding: 0.6rem 2rem 0.6rem ; cursor: pointer; border: solid 0.1rem white ; border-radius: 10rem ; }



@keyframes spin {
    from {transform:  rotate( 0deg ) ;  }
    to { transform:  rotate( 360deg ) ;  }
}
@keyframes spin2 {
    from {transform:  rotate( 360deg ) ;  }
    to { transform:  rotate( 0deg ) ;  }
}