@charset "UTF-8";

#loading-box {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .5);
  display: none;
}

#loading-box.active {
  display: flex;
}

#loading-box svg {
  width: 50px;
  height: 50px;
}

#loading-box svg + p {
  width: 100%;
  text-align: center;
  color: white;
  flex: 0 0 auto;
  margin-top: 10px;
}

#loading-box svg circle {
  fill: none;
  stroke: white;
  stroke-width: 3;
  stroke-linecap: round;
  /* 使うkeyframesの名前、再生時間、補間の仕方、繰り返すかどうか、をそれぞれ指定している */
  animation: wax-and-wane 2s cubic-bezier(.5, 0, .5, 1) infinite, rotate 1.5s linear infinite;
}

/* 全体の再生時間のn%のときになってほしいCSSプロパティを指定する */
@keyframes wax-and-wane {

  /* 状態1 */
  0% {
    stroke-dasharray: 236 78;
    stroke-dashoffset: -37;
  }

  /* 状態2 */
  50% {
    stroke-dasharray: 20 294;
    stroke-dashoffset: -304;
  }

  /* 状態3 */
  100% {
    stroke-dasharray: 236 78;
    stroke-dashoffset: -351;
  }
}

@keyframes rotate {
  /* 0%の時はどっちみち0度なので省略してもよいです */
  0% {
    transform: rotate(0);
  }

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