#container {
    opacity: 100%;
    display: flex;
    width: auto;
    height: 25px;
    background: rgb(255, 255, 255);
    border-radius: 6px;
    border: 2px solid rgb(27, 38, 199);
    align-items: center;
  }

  @keyframes load {
    from {
      transform: translate(0, 0);
    }
    to {
      transform: translate(220px, 0);
    }
  }

  #bar {
    width: 70px;
    height: 10px;
    background: linear-gradient(to bottom right, #304de3, rgb(51, 64, 242));
    border-radius: 3px;
    box-shadow: 0 0 10px lightblue;

    animation: load 1s infinite alternate ease-in-out;
  }

  @keyframes dots {
    from {
      color: cyan;
      transform: translate(0, -10%);
    }
    to {
      color: white;
      transform: translate(0, 0);
    }
  }

  .dot {
    display: inline-block;
    font-size: 250%;
  }

  .dot:nth-child(1) {
    animation: dots 0.5s infinite alternate linear;
  }

  .dot:nth-child(2) {
    animation: dots 1s infinite alternate linear;
  }

  .dot:nth-child(3) {
    animation: dots 199.5s infinite alternate linear;
  }