Komponenten

Jede Komponente live

Eigenständige React-Komponenten für deine Projekte. Jede Vorschau zeigt die echte Komponente: Bewege den Zeiger, klicke und tippe. Melde dich für Quellcode, Eigenschaften, Installation und die Versionen für Vue, Svelte, Astro und HTML an.

27 von 27

Orbit loader

1534Orbit loaderSymboleEin Ladeindikator, dessen drei Punkte im Abstand von einer Dritteldrehung auf einer Umlaufbahn laufen und dabei jeweils eine kurze Spur ziehen, während ein Bogen den äußeren Ring in die andere Richtung streicht.

1618Loader iconSymboleEin geschäftiger Indikator in drei Lesarten: ein Dreiviertelring, ein Verfolgungsring aus Punkten und vier sich drehende Klingen.

Assistant Ripple Glow

1665Assistant Ripple GlowHintergründeEine ringförmige Welle breitet sich nach außen über ein Duplikat des eigenen Inhalts eines Panels aus, während der Rand so lange aufleuchtet, wie eine Aufgabe ausgeführt wird.

Button set

1673Button setSchaltflächenEine vollständige Schaltflächenfamilie, die sechs Absichten, sechs Größen, reine Symbolformen und einen Ladestatus abdeckt, der in einem Spinner wechselt, ohne dass sich die Breite der Schaltfläche ändert.

Dot matrix status pill

1950Dot matrix status pillStatusmeldungenEine Pillentaste, deren linke Seite aus einem Raster mit fünf mal fünf Punkten besteht und für jeden Zustand ein kurzes Schleifenmuster abspielt, wobei die Beschriftung im Takt wechselt.

Fill progress loading text

1958Fill progress loading textStatusmeldungenEin Ladeetikett ist nur ein schwacher Umriss seiner selbst, während eine einfarbige Kopie es von links ausfüllt, wie ein Fortschrittsbalken in Form des Wortes, der sich während der Arbeit hin und her bewegt.

Fill sweep loading text

1959Fill sweep loading textStatusmeldungenEin Ladeetikett, dessen schwache Umrisse sich unter einer vollständig farbigen Kopie befinden, die von links hereingestrichen wird, die volle Breite erreicht und wieder herausläuft und sich so lange wiederholt, wie etwas geladen wird.

Labeled progress bar

1988Labeled progress barStatusmeldungenEine beschriftete Fortschrittsspur, deren Füllung sich auf eine neue Breite ausdehnt, während eine Prozentanzeige gleichmäßig zählt, um mit ihr übereinzustimmen.

Layered ring loader

1989Layered ring loaderStatusmeldungenEin zentriertes Emblem aus konzentrischen Teilringen, die sich mit unterschiedlicher Geschwindigkeit und Richtung drehen, darunter werden ein Statustitel und ein Untertitel eingeblendet.

Quiet Ring Spinner

2020Quiet Ring SpinnerStatusmeldungenEin minimaler Ladering mit einem Element: ein dünner Kreis mit einem farbigen Viertel, der sich kontinuierlich dreht, um einen Besetztzustand zu markieren.

Segmented progress meter

2032Segmented progress meterStatusmeldungenEine Fortschrittsanzeige, dargestellt als Reihe von Kerben, die nacheinander aufleuchten, mit einer teilweise ausgefüllten vorderen Kerbe und einer Beschriftung, die die aktuelle Stufe benennt.

Solid Ring Spinner

2047Solid Ring SpinnerStatusmeldungenEine gepolsterte, kastenförmige Ladeanzeige: ein dicker Ring mit einer akzentfarbenen Kante, der sich mit konstanter linearer Geschwindigkeit innerhalb einer abgerundeten Platte dreht.

Spring Fill Progress

2051Spring Fill ProgressStatusmeldungenEine schlanke Fortschrittsanzeige, deren Füllung auf einer Feder zu jedem neuen Wert gleitet, mit einer Anzeige, die mitzählt.

Sweeping status text

2060Sweeping status textTexteffekteEin großes Statuswort, das in einem gleichmäßigen Takt wechselt, während ein heller Streifen endlos über die Buchstabenformen streicht.

Task Log Loader

2065Task Log LoaderStatusmeldungenEin funktionierender Indikator, der einen verschachtelten Ringspinner mit einem kurzen nummerierten Baumstamm verbindet, dessen Linien nach Abschluss jedes Schritts nach oben scrollen.

Breathing dot loader

2117Breathing dot loaderStatusmeldungenPunkte, die an Ort und Stelle bleiben und atmen, anstatt sich abwechselnd zu bewegen, anzuschwellen und zu verblassen, sodass die Reihe wie ein langsamer Herzschlag aussieht.

Content Loading Card

2129Content Loading CardStatusmeldungenEin kartenförmiger Platzhalter, der mit einem langsamen opacity-Puls atmet, während noch ein großer Bildblock und zwei Textzeilen geladen werden.

Curtain line loader

2138Curtain line loaderStatusmeldungenEin Ladevorhang, der sich hinter einer hellen Wanderlinie zurückzieht und den fertigen Inhalt sichtbar macht, anstatt ihn einzublenden.

Expanding ring loader

2151Expanding ring loaderStatusmeldungenDünne Ringe, die aus einem einzigen Punkt herauswachsen und mit der Weitung verblassen, werden nacheinander freigegeben, damit der Puls nie aufhört.

Hopping dot loader

2167Hopping dot loaderStatusmeldungenEine kurze Reihe von Punkten, die in einer Wanderwelle hüpfen und jeweils einen Schlag nach dem Punkt daneben den Boden verlassen.

Loading Placeholder Blocks

2184Loading Placeholder BlocksStatusmeldungenVerdunkeln Sie abgerundete Platzhalterblöcke, die für einen Avatar und gestapelte Textzeilen stehen, während der Inhalt geladen wird, und synchronisieren Sie sie mit einem diagonalen Lichtband.

Segment Fade Spinner

2224Segment Fade SpinnerStatusmeldungenEine Ladeanzeige aus acht radialen Segmenten, die nacheinander ein- und ausgeblendet werden, sodass es scheint, als würde ein heller Bogen um den Ring jagen.

2231Single glyph spinnerStatusmeldungenEin minimaler Ringspinner: ein dünn gestrichelter Bogen, der sich kontinuierlich dreht, um zu signalisieren, dass eine Hintergrundaufgabe ausgeführt wird.

Sweeping progress bar

2250Sweeping progress barStatusmeldungenEine unbestimmte Ladestange in einem pillenförmigen Rahmen, die in einer sanften Endlosschleife vom Nichts zur vollen Breite und wieder zurück ins Nichts wächst.

Upload Progress Line

2262Upload Progress LineStatusmeldungenEin schlanker, animierter Fortschrittsbalken, der eine Aufgabe wie das Hochladen einer Datei von Null bis zum Abschluss zählt, mit einer Prozentanzeige und einer Beruhigungsanimation am Ende.

Endless Feed Loader

2347Endless Feed LoaderDatendarstellungEine Liste im Nachrichtenstil, die immer wieder neue Schlagzeilen hinzufügt, während unten ein kleiner Spinner ins Bild scrollt.

Flight path confirm button

2524Flight path confirm buttonSchaltflächenEin Buchungsknopf, der ein kleines Flugzeug in einer Runde um sein Gesicht fliegt, während drei Punkte pulsieren, dann grün wird und die Buchung als bestätigt meldet.

Gesamtes Verzeichnis öffnen

Schlagwörter

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (6)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (3)columns (3)combobox (4)command palette (3)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (12)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (8)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (3)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (11)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)wrapper (3)zoom (4)