.loading-box {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

.loading-box .text {
  position: relative;
  top: 30vh;
  text-align: center;
  z-index: 1;
  color: #407bf1;
  font-size: 35px;
  font-weight: bold;
}

.loading-box .item1 {
  width: 10vw;
  height: 20vh;
  background: #346c9c;
  border-radius: 100px 100px 0 0;
  position: absolute;
  left: 0;
  bottom: 0;
  animation: rectangle infinite 4s ease-in-out 1s;
}

.loading-box .item2 {
  width: 10vw;
  height: 60vh;
  background: #ddc871;
  border-radius: 100px 100px 0 0;
  position: absolute;
  left: calc(50vw / 4 + 10vw);
  bottom: 0;
  animation: rectangle infinite 2.5s ease-in-out 1s;
}

.loading-box .item3 {
  width: 10vw;
  height: 40vh;
  background: #ec2d7a;
  border-radius: 100px 100px 0 0;
  position: absolute;
  left: calc((50vw / 4) * 2 + 20vw);
  bottom: 0;
  animation: rectangle infinite 3s ease-in-out 1s;
}

.loading-box .item4 {
  width: 10vw;
  height: 70vh;
  background: #f7cfba;
  border-radius: 100px 100px 0 0;
  position: absolute;
  left: calc((50vw / 4) * 3 + 30vw);
  bottom: 0;
  animation: rectangle infinite 1.5s ease-in-out 1s;
}

.loading-box .item5 {
  width: 10vw;
  height: 30vh;
  background: #f9723d;
  border-radius: 100px 100px 0 0;
  position: absolute;
  right: 0;
  bottom: 0;
  animation: rectangle infinite 2s ease-in-out 1s;
}

@keyframes rectangle {
  0%,
  80%,
  100% {
    bottom: -5vh;
  }
  40% {
    bottom: -2vh;
  }
}