.loader {
  width: 64px;
  /* más grande */
  height: 64px;
  display: inline-block;
  position: relative;
  border: 4px solid #1e40af;
  /* azul, borde */
  border-radius: 50%;
  background: transparent;
  /* fondo transparente */
  box-sizing: border-box;
  padding: 30px;
}

.loader::after,
.loader::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%) rotate(0deg);
  transform-origin: center bottom;
  box-sizing: border-box;
  background: #1e40af;
  /* azul */
}

.loader::after {
  width: 4px;
  height: 20px;
  /* manecilla larga */
  animation: rotation-slow 10s linear infinite;
}

.loader::before {
  width: 4px;
  height: 28px;
  /* manecilla más larga */
  animation: rotation-fast 1s linear infinite;
}

@keyframes rotation-slow {
  0% {
    transform: translate(-50%, -100%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -100%) rotate(360deg);
  }
}

@keyframes rotation-fast {
  0% {
    transform: translate(-50%, -100%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -100%) rotate(360deg);
  }
}