Kreis-Spinner
Der klassische Ring-Spinner, bei dem du Farbe, Größe und Tempo passend für einen Button oder eine ganze Seite einstellst.
Einstellungen
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="Wird geladen"
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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Loader
Wofür du ihn nutzen kannst
Manchmal ist der ganz normale Lade-Spinner genau richtig: im „Senden“-Button, während ein Kontaktformular abgeschickt wird, neben einem Suchfeld, das auf Ergebnisse wartet, oder mitten in einer noch leeren Tabelle. Jeder versteht ihn sofort, ohne nachzudenken, und er braucht kaum Platz.
Gib ihm deine Markenfarbe und halte ihn in Buttons klein, etwa 16 bis 20 Pixel. Dauert das Warten meist länger als drei oder vier Sekunden, sagen ein Fortschrittsbalken oder ein Skeleton mehr darüber, was gleich kommt.