* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #loading {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: black;
    }

    ul {
      display: flex;
    }

    ul li {
      list-style: none;
      height: 20px;
      width: 20px;
      background-color: red;
      margin: 0 4px;
      border-radius: 50%;
      animation: bounce 1s linear infinite;
    }

    @keyframes bounce {
      0% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-40px);
      }
      100% {
        transform: translateY(0px);
      }
    }

    ul li:nth-child(1) {
      animation-delay: 0.2s;
      background-color: #7C33F3;
    }

    ul li:nth-child(2) {
      animation-delay: 0.6s;
      background-color: #F700BA;
    }

    ul li:nth-child(3) {
      animation-delay: 0.1s;
      background-color: #FF287F;
    }

    ul li:nth-child(4) {
      animation-delay: 0.8s;
      background-color: #FF8152;
    }

    ul li:nth-child(5) {
      animation-delay: 0.5s;
      background-color: #FFC246;
    }

    ul li:nth-child(6) {
      animation-delay: 0.1s;
      background-color: #F9F871;
    }