.c-spinner {
  margin: 0 auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999rem;
  border-top: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  border-left: 1rem solid transparent;
  transform: translateZ(0);
  animation: c-spinner-animate-rotate 1.1s infinite linear;
}

.c-spinner-light {
  border-top-color: rgba(255, 255, 255, 0.2);
  border-right-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.2);
  border-left-color: #eee;
}

.c-spinner-dark {
  border-top-color: rgba(0, 0, 0, 0.2);
  border-right-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.2);
  border-left-color: #111;
}

.c-spinner-sm,
.c-spinner-sm::after {
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  border-top-width: 0.4rem;
  border-right-width: 0.4rem;
  border-bottom-width: 0.4rem;
  border-left-width: 0.4rem;
}

.c-spinner-md,
.c-spinner-md::after {
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  border-top-width: 0.6rem;
  border-right-width: 0.6rem;
  border-bottom-width: 0.6rem;
  border-left-width: 0.6rem;
}

.c-spinner-lg,
.c-spinner-lg::after {
  border-radius: 50%;
  width: 8rem;
  height: 8rem;
  border-top-width: 0.8rem;
  border-right-width: 0.8rem;
  border-bottom-width: 0.8rem;
  border-left-width: 0.8rem;
}

@keyframes c-spinner-animate-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
