What is gradient-spin?

gradient-spin is a small React component that shows a loading spinner made of a grid of colored cells, swept by a moving gradient wave rather than the usual spinning circle. It has no runtime dependencies at all, so adding it does not pull in any other libraries. The wave can move across the grid in one of four patterns: an arrow shape folding toward the center, a diagonal sweep, a snake-like path that travels back and forth, or a ripple that expands outward like a ring in water. The colors themselves come from a gradient with several preset options, such as sunrise, mint, or twilight, or you can supply your own custom colors and where each one sits along the gradient. The color sampling is done using a color space called OKLab instead of a plain mix of red, green, and blue values, which the README says avoids colors turning muddy or gray partway through the gradient. Under the hood, every cell shares a single CSS animation, and each cell is simply given a different negative starting delay based on its distance from the wave's origin, so the browser only has to run one shared animation rather than many separate ones. Because of this, the spinner keeps animating smoothly even if the rest of the page's JavaScript is busy, which is exactly when a loading spinner needs to keep moving. It also respects a user's reduced-motion accessibility setting by freezing to a still frame, and it includes accessibility labeling out of the box. To use it, you install it from npm and import a single GradientSpin component, then customize its grid size, colors, pattern, and animation speed through props. There is a live demo site linked in the README, and a companion library called gradient-shimmer applies the same gradient colors to text instead of a spinner grid. The project is released under the MIT license.