animarte/animations/spinner/classic-1.css

Making the digital world a little more animated place

.animarte {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  width: var(--animarte-size);
  height: var(--animarte-size);
  color: var(--animarte-color);
}

.animarte-spinner {
  --width: 10%;
  --height: 25%;
  --radius: calc((var(--animarte-size) - var(--height)) / 2);
}
.animarte-spinner--classic-1 .animarte-spinner__element {
  position: absolute;
  left: calc(var(--x) + 7.5%);
  top: var(--y);
  width: var(--width);
  height: var(--height);
  border-radius: 100vw;
  opacity: 0.2;
  background: currentColor;
  animation-name: spinnerClassic1;
  animation-duration: var(--animarte-speed);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.animarte-spinner--classic-1 .animarte-spinner__element:nth-of-type(1) {
  --degree: calc(1 * 45deg);
  --x: calc(var(--radius) + var(--radius) * cos(var(--degree)));
  --y: calc(var(--radius) + var(--radius) * sin(var(--degree)));
  rotate: calc(var(--degree) - 90deg);
  animation-delay: calc(var(--animarte-speed) * 1 * 0.125);
}
.animarte-spinner--classic-1 .animarte-spinner__element:nth-of-type(2) {
  --degree: calc(2 * 45deg);
  --x: calc(var(--radius) + var(--radius) * cos(var(--degree)));
  --y: calc(var(--radius) + var(--radius) * sin(var(--degree)));
  rotate: calc(var(--degree) - 90deg);
  animation-delay: calc(var(--animarte-speed) * 2 * 0.125);
}
.animarte-spinner--classic-1 .animarte-spinner__element:nth-of-type(3) {
  --degree: calc(3 * 45deg);
  --x: calc(var(--radius) + var(--radius) * cos(var(--degree)));
  --y: calc(var(--radius) + var(--radius) * sin(var(--degree)));
  rotate: calc(var(--degree) - 90deg);
  animation-delay: calc(var(--animarte-speed) * 3 * 0.125);
}
.animarte-spinner--classic-1 .animarte-spinner__element:nth-of-type(4) {
  --degree: calc(4 * 45deg);
  --x: calc(var(--radius) + var(--radius) * cos(var(--degree)));
  --y: calc(var(--radius) + var(--radius) * sin(var(--degree)));
  rotate: calc(var(--degree) - 90deg);
  animation-delay: calc(var(--animarte-speed) * 4 * 0.125);
}
.animarte-spinner--classic-1 .animarte-spinner__element:nth-of-type(5) {
  --degree: calc(5 * 45deg);
  --x: calc(var(--radius) + var(--radius) * cos(var(--degree)));
  --y: calc(var(--radius) + var(--radius) * sin(var(--degree)));
  rotate: calc(var(--degree) - 90deg);
  animation-delay: calc(var(--animarte-speed) * 5 * 0.125);
}
.animarte-spinner--classic-1 .animarte-spinner__element:nth-of-type(6) {
  --degree: calc(6 * 45deg);
  --x: calc(var(--radius) + var(--radius) * cos(var(--degree)));
  --y: calc(var(--radius) + var(--radius) * sin(var(--degree)));
  rotate: calc(var(--degree) - 90deg);
  animation-delay: calc(var(--animarte-speed) * 6 * 0.125);
}
.animarte-spinner--classic-1 .animarte-spinner__element:nth-of-type(7) {
  --degree: calc(7 * 45deg);
  --x: calc(var(--radius) + var(--radius) * cos(var(--degree)));
  --y: calc(var(--radius) + var(--radius) * sin(var(--degree)));
  rotate: calc(var(--degree) - 90deg);
  animation-delay: calc(var(--animarte-speed) * 7 * 0.125);
}
.animarte-spinner--classic-1 .animarte-spinner__element:nth-of-type(8) {
  --degree: calc(8 * 45deg);
  --x: calc(var(--radius) + var(--radius) * cos(var(--degree)));
  --y: calc(var(--radius) + var(--radius) * sin(var(--degree)));
  rotate: calc(var(--degree) - 90deg);
  animation-delay: calc(var(--animarte-speed) * 8 * 0.125);
}

@keyframes spinnerClassic1 {
  0%, 75%, 100% {
    opacity: 0.2;
  }
  12.5% {
    opacity: 1;
  }
}