.loader {
  position: absolute;
}

.cercle {
  position: absolute;
  background: #3f7ee8;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  top: -40px;
  left: -70px;
  animation: move-up6 .4s ease-in infinite alternate-reverse;
}

.cercle:nth-child(2) {
  width: 25px;
  height: 25px;
  top: -2px;
  left: -5px;
  background: #de4032;
  animation: move-down1 .4s ease-in infinite alternate-reverse;
}

.cercle:nth-child(3) {
  width: 30px;
  height: 30px;
  top: 35px;
  left: -7px;
  background: #eeb205;
  animation: move-updown1 .4s ease-in infinite alternate-reverse;
}

.cercle:nth-child(4) {
  width: 12px;
  height: 12px;
  top: -10px;
  left: 25px;
  background: #31aa52;
  animation: move-up6 .4s ease-in infinite alternate-reverse;
}

@keyframes move-up6 {
  to {
    transform: translateY(-5px);
  }
}

@keyframes move-down1 {
  to {
    transform: translateY(5px);
  }
}

@keyframes move-updown1 {
  to {
    transform: translateY(10px);
  }

  from {
    transform: translateY(-7px);
  }
}