.loader {
  display: inline-block;
  position: relative;
  width: 30px;
}
.loader-3 .dot {
  width: 5px;
  height: 5px;
  background: #00e676;
  border-radius: 50%;
  position: absolute;
  top: calc(50% + 2px)
}

.loader-3 .dot1 {
  left: 0;
  -webkit-animation: dot-jump .5s cubic-bezier(0.77,0.47,0.64,0.28) alternate infinite;
  animation: dot-jump .5s cubic-bezier(0.77,0.47,0.64,0.28) alternate infinite
}

.loader-3 .dot2 {
  left: 10px;
  -webkit-animation: dot-jump .5s .2s cubic-bezier(0.77,0.47,0.64,0.28) alternate infinite;
  animation: dot-jump .5s .2s cubic-bezier(0.77,0.47,0.64,0.28) alternate infinite
}

.loader-3 .dot3 {
  left: 20px;
  -webkit-animation: dot-jump .5s .4s cubic-bezier(0.77,0.47,0.64,0.28) alternate infinite;
  animation: dot-jump .5s .4s cubic-bezier(0.77,0.47,0.64,0.28) alternate infinite
}

@keyframes dot-jump {
  0% {
      transform: translateY(0)
  }

  100% {
      transform: translateY(-15px)
  }
}