Color Wheel Loader | Learning Axis

HTML

CSS

@property --degree {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --factor {
  syntax: '<length>';
  initial-value: 1px;
  inherits: false;
}
@property --blur {
  syntax: '<length>';
  initial-value: 1px;
  inherits: false;
}
body,html {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px;
  background-color: #333;
}
.dots {
  position:relative;
  width:1px;
  height:1px;
}
.dots span {
  display: block;
  animation:
    colors 3s infinite cubic-bezier(.75,.25,.25,.75),
    pulse 3s infinite cubic-bezier(.75,.25,.25,.75);
  border-radius: 100px;
  width: 10px;
  height: 10px;
  background-color: hsl(var(--degree) 100% 50%);
  rotate: var(--degree);
  filter: blur(var(--blur));
  margin-left:50px;
  transform-origin:-50px 50%;
  width: var(--factor);
  position: absolute;
  left:0px;
  top:0px;
}
@keyframes colors {
  0% { --degree: 0deg; }
  100% { --degree: 360deg; }
}
@keyframes pulse {
  0% { --factor: 40px; --blur:0px; }
  50% { --factor: 10px; --blur:3px; }
  100% { --factor: 40px; --blur:0px; }
}
.dots span:nth-child(10n + 1) {
  animation-delay: -0.3s;
}
.dots span:nth-child(10n + 2) {
  animation-delay: -0.6s;
}
.dots span:nth-child(10n + 3) {
  animation-delay: -0.9s;
}
.dots span:nth-child(10n + 4) {
  animation-delay: -1.2s;
}
.dots span:nth-child(10n + 5) {
  animation-delay: -1.5s;
}
.dots span:nth-child(10n + 6) {
  animation-delay: -1.8s;
}
.dots span:nth-child(10n + 7) {
  animation-delay: -2.1s;
}
.dots span:nth-child(10n + 8) {
  animation-delay: -2.4s;
}
.dots span:nth-child(10n + 9) {
  animation-delay: -2.7s;
}
.dots span:nth-child(10n) {
  animation-delay: -3s;
}