/* Rotation */

.rotating::before{
  content: " ";
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  height: 50px;
  width: 50px;
  background-image: linear-gradient(to bottom,black 50%, white 50%);
  border-radius: 50%;
  animation: rotate 1s;
  animation-iteration-count: infinite;
}

.rotating::after{
  content: " ";
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  height: 40px;
  width: 40px;
  background-color: #020202;
  border-radius: 50%;
}

/* Blinking */

.blinking::after{
  content: " ";
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color:#fff;
  animation: blink 2000ms ease infinite;
}

.blinking-2::after{
  background-color: transparent;
  border: 2px solid white;
  transform: scale(0);
  animation: blink-2 2000ms ease-out infinite,blink-2a 2s ease-out infinite;
  animation-fill-mode: forwards;
}

.bounce::after{
  content: " ";
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 25px);
  height: 50px;
  width: 50px;
  box-sizing: border-box;
  background-image: linear-gradient(to bottom,rgb(255, 255, 255) 60%, rgb(235, 235, 235) 80%, rgb(210, 210, 210));
  border-radius: 50%;
  animation: bounce 2s;
  animation-iteration-count: infinite;
}

.ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: ring 1.2s linear infinite;
}


/* Key frames */

@keyframes rotate{
  from{
      transform: rotate(0deg);
  }
  to{
      transform: rotate(360deg);
  }
}

@keyframes blink{
  0%{
      transform: scale(1);
  }
  50%{
      transform: scale(1.5);
  }
  100%{
      transform: scale(1);
  }
}

@keyframes blink-2{
  0%{
      transform: scale(0.2);
  }
  100%{
      transform: scale(1.5);
  }
}

@keyframes bounce{
  0%,100%{
      transform: translateY(0);
      height: 50px;
      width: 50px;
  }
  50%{
      transform: translateY(50px);
      height: 45px;
      width: 55px;
  }
}

@keyframes ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}