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.

21 von 21

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.

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.

Count badge cluster

1945Count badge clusterStatusmeldungenEine Reihe von Wortpillen und kompakten numerischen Token zum Beschriften oder Inline-Zählen.

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.

1957Field with status iconFormulareEine beschriftete Eingabe, an deren hinterer Kante ein kleines Häkchen- oder Warnsymbol angezeigt wird, das ausgeblendet wird, sobald sich die Gültigkeit des Felds ändert, ohne dass sich das Layout ändert.

Hairline Tone Badge

1977Hairline Tone BadgeStatusmeldungenEin unbefülltes Pillenetikett, dessen Rand und Text dieselbe Farbe haben, sodass eine Reihe davon wie eine gedruckte Legende liest.

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.

Left Rule Notice

1990Left Rule NoticeStatusmeldungenEine leise Box-Nachricht, deren Ton von einem einzelnen dicken farbigen Lineal getragen wird, das am linken Rand entlang verläuft.

2016Presence Avatar ClustersDatendarstellungZwei überlappende Avatar-Cluster, online und offline, wobei durch Klicken auf einen Avatar dieser in den anderen Cluster verschoben wird, während sein Porträt von oder zu Graustufen überblendet.

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.

Transfer status card

2070Transfer status cardStatusmeldungenEine Geldtransferkarte, die von einem Verarbeitungsstatus in einen abgeschlossenen Status übergeht, wobei sich ein sich drehendes Symbol in ein Häkchen verwandelt und die beiden Kontozeilen miteinander verschmelzen.

Filterable record table

2154Filterable record tableDatendarstellungEine Datensatztabelle mit einem Live-Textfilter, farbigen Statuspillen und einer rechtsbündigen Währungsspalte, die beim Sortieren lesbar bleibt.

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.

2245Status AvatarDatendarstellungEin runder Avatar, der auf Initialen ohne Bild zurückgreift und ein kleines Online-Statusabzeichen tragen oder mit anderen stapeln kann.

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.

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)