<div class="wrap">
    <div class="cover">
        <p class="hint">error</p>
    </div>
    <div class="spinner">
        <div class="spinner_load">
            <div class="bounce bounce1"></div>
            <div class="bounce bounce2"></div>
            <div class="bounce bounce3"></div>
        </div>
    </div>
</div>

html,body
  background-color transparent
  overflow-x hidden
    .cover
      display none
      position fixed
      width 100%
      height 100%
      top: 0
      left 0
      z-index 99999
      touch-action none
      background-color: rgba(0,0,0,0.7)
      .hint
        position absolute
        width 88%
        padding 20px 0
        top 50%
        left 50%
        margin-top (-@height/2)px
        margin-left -(@width/2)%
        word-wrap break-word
        border-radius 20px
        font-size 28px
        background-color #666666
        text-align center
        color #ffffff

.spinner
  // display none
  position fixed
  left 0
  top 0
  z-index 999
  width 100%
  height 100%
  touch-action none
  background-color: rgba(0,0,0,0.7)
  text-align center
  .spinner_load
    position absolute
    top 50%
    left 50%
    transform translate(-50%,-50%)
  .bounce
    width: 30px
    height: 30px
    background-color: #ffc363
    border-radius: 100%
    display: inline-block
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out
    animation: bouncedelay 1.4s infinite ease-in-out
    /* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both
    animation-fill-mode: both
  .bounce1
    -webkit-animation-delay: -0.32s
    animation-delay: -0.32s
  .bounce2
    -webkit-animation-delay: -0.16s
    animation-delay: -0.16s
@-webkit-keyframes bouncedelay
  0%, 80%, 100% {
    -webkit-transform: scale(0.0)
  }
  40% {
    -webkit-transform: scale(1.0)
  }

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