.loader-five,
.loader-five__dot {
  position: relative;
  width: 100px;
  height: 100px;
}

.loader-five {
  margin: auto;
  transform-origin: center;
  animation: anirotate 10s linear infinite;
}

.loader-five__dot {
  position: absolute;
  border: 0px solid #fff;
  border-radius: 50px;
}

.loader-five__dot:nth-child(2) {
  transform: rotate(40deg);
}

.loader-five__dot:nth-child(2) .dot {
  animation-delay: -0.5s;
}

.loader-five__dot:nth-child(3) {
  transform: rotate(80deg);
}

.loader-five__dot:nth-child(3) .dot {
  animation-delay: -1s;
}

.dot {
  position: absolute;
  height: 10px;
  width: 10px;
  background: #000;
  border-radius: 5px;
  transform: translate(0, 0);
}

.dot:nth-child(1) {
  top: 0;
  left: calc(50% - 5px);
  animation: ani1 2s infinite;
}

.dot:nth-child(2) {
  bottom: calc(28% - 5px);
  left: calc(11% - 5px);
  animation: ani2 2s infinite;
}

.dot:nth-child(3) {
  bottom: calc(28% - 5px);
  right: calc(11% - 5px);
  animation: ani3 2s infinite;
}

[hidden] {
  display: none;
}

@keyframes anirotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-359deg);
  }
}

@keyframes ani1 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-40px, 67px);
  }
}

@keyframes ani2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(77px, 0);
  }
}

@keyframes ani3 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-39px, -67px);
  }
}