#app
  .loading-box
    .access-zone
    - var n = 1
    while n < 6
      .sheet(class=`p-${n++}`)
        .line
        .line
        .line
        .block
        .line
        .line
  .loading-text
    code loading
  .desc-408
    code 408 Request Timeout
    p The server wait receiving complete request but time is out.
    p Please <a href="https://codepen.io/shentengtu/pen/zJQQqN">try it again</a> latter. 
    

@mixin keyframes($name) {
  @keyframes #{$name}{
    @content;
  }
}

@include keyframes(sheet-move) {
  20% {
    top: 0.5rem;
    left: 160px;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    opacity: 0.75;
  }
  40% {
    top: 0.5rem;
    left: 220px;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    opacity: 0.5;
  }
  60% {
    top: 0.5rem;
    left: 220px;
    opacity: 0;
  }
  80% {
    top: -0.5rem;
    left: -0.5rem;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

$sheetW: 4.2rem;
$sheetH: 5.94rem;
$accessColor: rgb(16,150,0);
$closeColor: rgb(200,16,0);
*,*::before,*::after {
  box-sizing: border-box;
}

#app {
  width: 100vw;
  height: 100vh;
  background-color: #f3f7e9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .loading-text {
    margin: 0.2rem;
    code {
      font-size: 1.2rem;
    }
  }
  .desc-408 {
    margin: 1rem;
    text-align: center;
    transition: height 0.5s ease-in 0.25s, opacity 0.5s ease-in 0.25s;
    opacity: 0;
    height: 0;
    code {
      font-size: 2rem;
    }
    &.show {
      height: calc(75vh - 8rem);
      opacity: 1;
    }
  }
  .loading-box {
    position: relative;
    width: 300px;
    height: 7rem;
    padding: 0.5rem 0;
    margin: 0.4rem;
    .sheet, .access-zone {
      position: absolute;
      top: 0.5rem;
      width: $sheetW;
      height: $sheetH;
    }
    .access-zone {
      left: 220px;
      border: 2px dashed $accessColor;
      background-color: rgba($accessColor,0.2);
      box-shadow: 0 0 8px rgba($accessColor,0.8) inset;
      font-size: 2rem;
      text-align: center;
      line-height: $sheetH;
      &::before {
        content: '⌛';
        color: $accessColor;
      }
      &.close {
      border: 2px dashed $closeColor;
      background-color: rgba($closeColor,0.2);
      box-shadow: 0 0 8px rgba($closeColor,0.8) inset;
        &::before {
          content: '⛔';
          color: $closeColor;
        }
      }
    }
    .sheet {
      background-color: #fdfdfd;
      box-shadow: 0 0 2px rgba(0,0,0,0.4);
      padding: 0.4rem;
      @for $i from 0 through 4 {
        &.p-#{$i+1} {
          left: #{$i*10 + 10}px;
          animation-fill-mode: forwards;
          animation-duration: 4s;
          animation-timing-function: linear;
          animation-delay: #{3.5-$i*0.75}s;
        }
      }
      &.start-animate {
        animation-name: sheet-move;
      }
      &.pause-animate{
        animation-play-state: paused;
      }
      .line {
        margin-bottom: 0.2rem;
        width: 3.4rem;
        height: 0.4rem;
        background-color: #a0a0a0;
        border-radius: 15%;
        &:nth-child(3) {
          width: 2.4rem;
        }
        &:nth-child(6) {
          width: 3rem;
        }
      }
      .block {
        width: 3.4rem;
        height: 2rem;
        margin-bottom: 0.2rem;
        background-color: #c0c0c0;
        border-radius: 5%;
      }
    }
  }
}

var sheets = document.querySelectorAll('.sheet')
var timeout = false

// mock  408 timeout (try change ms)
var timeout408 = setTimeout(()=> {
  timeout = true
  puaseAnimate()
  clearTimeout(timeout408)
}, 9000);

doAnimate()

function puaseAnimate() {
  pause(sheets)
  let accessZone = document.querySelector('.access-zone')
  let des408 = document.querySelector('.desc-408')
  accessZone.classList.add('close')
  des408.classList.add('show')
}

function doAnimate() {
  var animateLoop = setInterval(interval, 7750);
  interval ()
}

function interval () {
  if(timeout) {
    if(id) clearInterval(id)
  }
  stop(sheets)
  var delay = setTimeout(()=> {
    start(sheets)
    clearTimeout(delay)
  }, 250);
}

function start(sheets) {
  sheets.forEach(e => e.classList.add('start-animate'))
}

function pause(sheets) {
   sheets.forEach(e => e.classList.add('pause-animate'))
}

function stop(sheets) {
  sheets.forEach(e => e.classList.remove('start-animate'))
}