.spinner {
  width: 100%;
  padding: 50px 0;
}

.spinner__svg {
  display: block;
  margin: 0 auto;
  fill: #000;
}

@keyframes jumping {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  25% {
    opacity: 1;
    transform: translateY(-10px);
  }
  75% {
    opacity: 1;
    transform: translateY(-10px);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

.spinner__svg circle {
  animation-name: jumping;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(.05, .2, .35, 1);
  animation-iteration-count: infinite;
}

.spinner__svg circle:nth-child(2) {
  animation-delay: .18s;
}

.spinner__svg circle:nth-child(3) {
  animation-delay: .36s;
}