.m-loading__shade {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
}
.m-loading__shade:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  aspect-ratio: 4;
  background: no-repeat radial-gradient(circle closest-side, #9FDAFF 90%, #0000) 0% 50%, no-repeat radial-gradient(circle closest-side, #9FDAFF 90%, #0000) 50% 50%, no-repeat radial-gradient(circle closest-side, #9FDAFF 90%, #0000) 100% 50%;
  background-size: calc(100%/3) 100%;
  animation: loading 1s infinite linear;
}
@keyframes loading {
  33% {
    background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%;
  }
  50% {
    background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%;
  }
  66% {
    background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%;
  }
}