React + MotionLoaders
Circular spinner
The classic ring spinner, with color, size and speed you can tune to fit a button or a whole page.
Settings
48px
1s
Code
interface SpinnerProps {
color?: string;
size?: number;
/** Segundos por vuelta. */
speed?: number;
}
export default function Spinner({
color = "#0071e3",
size = 48,
speed = 1,
}: SpinnerProps) {
return (
<div
role="status"
aria-label="Loading"
className="animate-spin rounded-full border-transparent"
style={{
width: size,
height: size,
borderWidth: Math.max(2, size / 10),
borderColor: `${color}33`,
borderTopColor: color,
animationDuration: `${speed}s`,
}}
/>
);
}
Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Loaders
Where to use it
Sometimes the plain loading spinner is exactly right: inside a “Send” button while a contact form submits, next to a search field waiting for results or in the middle of an empty table. People know what it means before they even think about it, and it takes up almost no space.
Match the color to your brand and keep it small inside buttons, around 16 to 20 pixels. If the wait usually goes past three or four seconds, a progress bar or a skeleton tells people more about what is coming.