React + MotionLoader

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

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="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.