Rotate
The gradient square beside the copy is the live demo: it runs an infinite rotate keyframe so you can reuse the same pattern for spinners or “syncing” rows.
Syncing workspace
Uploading assets to the edge — this icon rotates until the batch finishes.
Widely Supported
Quick implementation
@keyframes rotate-spin {
to { transform: rotate(360deg); }
}
.rotate-card__icon {
animation: rotate-spin 2.8s linear infinite;
}Prompt this to your LLM
Status rows and buttons.
You are adding a looping rotation to a small square icon.
Goal: @keyframes from 0 to 360deg on transform rotate; linear; infinite; duration ~2–3s.
Constraints:
- prefers-reduced-motion: freeze at 0deg (no animation).
- Icon should be GPU-friendly (transform only).
Return CSS.Why this matters in 2026
Rotation is the most recognizable “in progress” cue; pairing it with explanatory copy avoids ambiguous spinners.
The logic
Linear easing keeps angular velocity constant—what users expect from mechanical or sync indicators.
Accessibility & performance
Stop infinite motion for reduced-motion users; expose aria-busy on the real component when you wire it up.