Twenty tiny dot-matrix loaders built from a single
element each — one <i>, one ::before, and a box-shadow
keyframe walking through frames. They inherit currentColor, scale to any size,
and respect prefers-reduced-motion .
One element per spinner. Add the variant class. That's it.
<!-- include dotspin.css -->
<link rel="stylesheet" href="dotspin.css">
<i class="dotspin dotspin--orbit"></i>
<i class="dotspin dotspin--braille"></i>
<i class="dotspin dotspin--pulse"></i>
Three CSS variables, plus color. No build step.
.dotspin {
--dotspin-size: 64px; /* default 1em */
--dotspin-speed: 0.9s; /* default 1.2s */
color: #ff5733; /* dots use currentColor */
}