//CSS//
body {
  margin: 0;
  padding: 0; }

.loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.01);
  z-index: 99999; }
  .loader:before {
    content: " ";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    margin-left
 
: -18px;
    box-sizing: border-box;
    border-top: 1.5px solid #de5858;
    border-left: 1.5px solid #e68282;
    animation-name: rotate;
    border-radius: 50%;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-delay: 0s; }

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

//SASS//
$ColorA : #de5858
$ColorB : #e68282
body
    margin: 0
    padding: 0
.loader
    position: fixed
    width: 100%
    height: 100%
    background: rgba(0,0,0,.01)
    z-index: 99999     
    &:before
        content: " "
        position: absolute
        left: 50
 
%
        top: 50%
        width: 36px
        height: 36px
        margin-top: -18px
        margin-left: -18px    
        box-sizing: border-box 
        border-top: 1.5px solid $ColorA        
        border-left: 1.5px solid $ColorB
        animation-name: rotate
        border-radius: 50% 
        animation-duration: .5s  
        animation-iteration-count: infinite
        animation-delay: 0s
@keyframes rotate
    0%
        transform: rotate(0deg)   
    100%
        transform: rotate(360deg)    

//JS控制顯示
document.onreadystatechange = function() {
    console.log( document.readyState)
    let loader =  document.getElementsByClassName('loader')[0]
    if(document.readyState === 'complete'){
        loader.style.display = 'none'
    }
}