loading animate spinner write with scss

1.PNG

_ajax-loader.scss

.ajax-overlay  { 
  background-color: rgba(0, 0, 0, .85); 
  margin: 0 auto; 
  width: 100%;  
  height: 100%; 
  position: fixed; 
  top: 0; 
  left: 0; 
  z-index: 99999; 
  text-align: center;

  &:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }

  .ajax-loader { 
    text-align: center; 
    vertical-align: middle;
    padding-top: 4em; 
    color:#efefef; 
    font-size:20px;
    display: inline-block;

    a.btn {
      text-decoration: none;
      margin-top: 10px;
    }
  }

  .spinner {
    margin: 0 auto 0;
    width: 70px;
    height: 70px;
    text-align: center;
     display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    > div {
      width: 18px;
      height: 18px;
      background: #fff;

      border-radius: 100%;
      display: inline-block;
      -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
      animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }
    .bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
    .bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    } 

    &.nocssanimation {
      background: url(data:image/gif;base64,R0lGODlhKwALAPEAAP///2Cv/rDX/mCv/iH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAKwALAAACMoSOCMuW2diD88UKG95W88uF4DaGWFmhZid93pq+pwxnLUnXh8ou+sSz+T64oCAyTBUAACH5BAkKAAAALAAAAAArAAsAAAI9xI4IyyAPYWOxmoTHrHzzmGHe94xkmJifyqFKQ0pwLLgHa82xrekkDrIBZRQab1jyfY7KTtPimixiUsevAAAh+QQJCgAAACwAAAAAKwALAAACPYSOCMswD2FjqZpqW9xv4g8KE7d54XmMpNSgqLoOpgvC60xjNonnyc7p+VKamKw1zDCMR8rp8pksYlKorgAAIfkECQoAAAAsAAAAACsACwAAAkCEjgjLltnYmJS6Bxt+sfq5ZUyoNJ9HHlEqdCfFrqn7DrE2m7Wdj/2y45FkQ13t5itKdshFExC8YCLOEBX6AhQAADsAAAAAAAAAAAA=) no-repeat center center transparent;
      > div {
        display: none;
      }
    }
  }

  @-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
  }

  @keyframes sk-bouncedelay {
    0%, 80%, 100% { 
      -webkit-transform: scale(0);
      transform: scale(0);
    } 40% { 
      -webkit-transform: scale(1.0);
      transform: scale(1.0);
    }
  }

}