One rotating border, timed to a specific speed
A 40px spinner in accent color #2563EB, completing one rotation every 0.8 seconds, generates a @keyframes rule (veo-spin, rotating 0 to 360 degrees) paired with a .loader class using a 4px border where only the top edge is colored (border-top-color: #2563EB) against an otherwise light gray border.
The spinning illusion comes from a simple trick: three sides of the border share the same light gray color, while only the top side is colored differently -- as the whole element rotates continuously, that one colored segment appears to chase around the circle, creating the classic loading-spinner look from just a single rotating element.
border-radius: 50% turns the square bordered box into a circle -- without it, this same rotating-border technique would produce a spinning square frame instead of the smooth circular loader most people associate with a 'spinner.'
Why the keyframes name matters if you use multiple spinners
Keyframes name is veo-spin. Rename it if the page already defines that identifier. @keyframes names need to be unique within a stylesheet -- if your page already has a different animation defined under the name 'veo-spin' (unlikely, but possible), the two would conflict, with whichever rule loads last silently overriding the other. Renaming this generator's keyframes identifier avoids that collision.
The speed value (0.8 seconds here) controls how long one full rotation takes -- a smaller value spins faster, a larger value spins more slowly, and linear timing (used here, not shown as adjustable but baked into the animation shorthand) keeps the rotation speed constant throughout, which is what makes a spinner read as smooth and continuous rather than pulsing.
This produces a single-color accent spinner -- for a multi-color or gradient spinner effect, additional CSS beyond this generator's base border-based technique would be needed, since a simple border can only take one color per side.
Related CSS animation and UI-component tools
For a different rotation-based animation pattern using the same core @keyframes rotate technique, the CSS Keyframe Animation Generator covers that more general case.
Loading spinners often accompany a scrollable container with custom styling -- the CSS Scrollbar Styling Generator is a related UI-polish tool.
Frequently Asked Questions (FAQ)
How does a single rotating border create the spinning-loader illusion?
Three sides of the border share the same light gray color, while only the top side is colored differently. As the whole element continuously rotates via the keyframes animation, that one colored segment appears to chase around the circle, creating the classic spinner effect from a single element.
What does border-radius: 50% do in this loader?
It turns the square bordered box into a perfect circle. Without it, the same rotating-border technique would produce a spinning square frame rather than the smooth circular loader shape.
Why might I need to rename the 'veo-spin' keyframes identifier?
Keyframes name is veo-spin. Rename it if the page already defines that identifier. @keyframes names must be unique within a stylesheet. If your page happens to already define an animation under that same name, the two would conflict, with one silently overriding the other -- renaming avoids that collision.
What does the speed value actually control?
It sets how long one full 360-degree rotation takes -- a smaller value spins faster, a larger value spins more slowly. Linear timing keeps rotation speed constant throughout, which is what makes the spinner read as smooth rather than pulsing or uneven.
Can this generator create a multi-color or gradient spinner?
Not directly -- this technique relies on a simple border, which only supports one color per side. A multi-color or gradient spinner effect would need additional CSS techniques beyond this generator's basic single-accent-color approach.
