.bar {
    float: left;
    width: 15px;
    height: 6px;
    border-radius: 2px;
    background-color: #4b9cdb;
  }


  .loading-line {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background-color: #4b9cdb;
  }
  


 /* =Animate the stuff
  ------------------------ */
  .load-1 .loading-line:nth-last-child(1) {
    animation: loadingA 1.5s 1s infinite;
  }
  .load-1 .loading-line:nth-last-child(2) {
    animation: loadingA 1.5s 0.5s infinite;
  }
  .load-1 .loading-line:nth-last-child(3) {
    animation: loadingA 1.5s 0s infinite;
  }
  

  .load-10 .bar {
    animation: loadingJ 4s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
  }

  /* keyframes Area 
   ------------------ */
   @keyframes loadingA {
    0% {
      height: 15px;
    }
    50% {
      height: 35px;
    }
    100% {
      height: 15px;
    }
  }


  @keyframes loadingJ {
    0%,
    100% {
      transform: translate(0, 0);
    }
  
    50% {
      transform: translate(1450px, 0);
      background-color: #f5634a;
      width: 100px;
    }
  }