Iniciar sesión

Componentes

Cada componente, en vivo

Componentes originales de React para tus proyectos. Cada ficha muestra el componente real: mueve el cursor, haz clic y escribe. Inicia sesión para acceder al código, las propiedades, la instalación y las versiones Vue, Svelte, Astro y HTML.

27 de 27

Orbit loader

1534Orbit loaderIconosUn indicador de carga cuyos tres puntos recorren una órbita con una separación de un tercio de vuelta, cada uno arrastrando un rastro corto, mientras que un arco barre el anillo exterior en la otra dirección.

1618Loader iconIconosUn indicador de ocupado en tres lecturas: un anillo de tres cuartos, un anillo de puntos y cuatro hojas giratorias.

Assistant Ripple Glow

1665Assistant Ripple GlowFondosUna onda en forma de anillo se extiende hacia afuera sobre un duplicado del propio contenido de un panel mientras su borde se ilumina mientras se ejecuta una tarea.

Button set

1673Button setBotonesUna familia de botones completa que cubre seis intenciones, seis tamaños, formas de solo íconos y un estado de carga que se intercambia en una rueda giratoria sin que el botón cambie de ancho.

Dot matrix status pill

1950Dot matrix status pillMensajes de estadoUn botón de pastilla cuyo lado izquierdo es una cuadrícula de cinco por cinco puntos que reproduce un patrón de bucle corto para cada estado, con el título intercambiando paso a paso.

Fill progress loading text

1958Fill progress loading textMensajes de estadoUna etiqueta de carga se asienta como un tenue contorno de sí misma, mientras que una copia de color sólido la completa desde la izquierda como una barra de progreso con la forma de la palabra, deslizándose hacia adelante y hacia atrás mientras se realiza el trabajo.

Fill sweep loading text

1959Fill sweep loading textMensajes de estadoUna etiqueta de carga cuyo contorno tenue se encuentra debajo de una copia completamente coloreada que avanza desde la izquierda, alcanza todo su ancho y desaparece, repitiéndose mientras algo se carga.

Labeled progress bar

1988Labeled progress barMensajes de estadoUna pista de progreso etiquetada cuyo relleno se reduce a un nuevo ancho mientras que una lectura de porcentaje cuenta suavemente para coincidir.

Layered ring loader

1989Layered ring loaderMensajes de estadoUn emblema centrado de anillos parciales concéntricos que giran a diferentes velocidades y direcciones, con un título de estado y un subtítulo que se desvanecen debajo.

Quiet Ring Spinner

2020Quiet Ring SpinnerMensajes de estadoUn anillo de carga mínimo de un solo elemento: un círculo delgado con un cuarto de color que gira continuamente para marcar un estado de actividad.

Segmented progress meter

2032Segmented progress meterMensajes de estadoUn medidor de progreso dibujado como una fila de muescas que se iluminan a su vez, con una muesca inicial parcialmente llena y una leyenda que nombra la etapa actual.

Solid Ring Spinner

2047Solid Ring SpinnerMensajes de estadoUn indicador de carga acolchado y en caja: un anillo de trazo grueso con un borde de color acentuado que gira a una velocidad lineal constante dentro de un panel redondeado.

Spring Fill Progress

2051Spring Fill ProgressMensajes de estadoUna pista de progreso delgada cuyo relleno se desliza hasta cada nuevo valor en un resorte, con una lectura que cuenta junto con él.

Sweeping status text

2060Sweeping status textEfectos de textoUna palabra de estado grande que cambia a un ritmo constante mientras una banda brillante recorre sin cesar las formas de las letras.

Task Log Loader

2065Task Log LoaderMensajes de estadoUn indicador de funcionamiento que combina un anillo giratorio anidado con un registro numerado corto cuyas líneas se desplazan hacia arriba a medida que se completa cada paso.

Breathing dot loader

2117Breathing dot loaderMensajes de estadoPuntos que permanecen quietos y respiran en lugar de moverse, hinchándose y atenuándose a su vez para que la fila se lea como un latido cardíaco lento.

Content Loading Card

2129Content Loading CardMensajes de estadoUn marcador de posición en forma de tarjeta que respira con un lento pulso opacity mientras aún se cargan un gran bloque de imagen y dos líneas de texto.

Curtain line loader

2138Curtain line loaderMensajes de estadoUna cortina de carga que se retira detrás de una línea viajera brillante, cortando el contenido terminado a la vista en lugar de desvanecerlo.

Expanding ring loader

2151Expanding ring loaderMensajes de estadoAnillos finos que crecen a partir de un solo punto y se desvanecen a medida que se ensanchan, se liberan uno tras otro para que el pulso nunca se detenga.

Hopping dot loader

2167Hopping dot loaderMensajes de estadoUna fila corta de puntos que saltan en una onda viajera y cada uno abandona el suelo un latido después del punto que está a su lado.

Loading Placeholder Blocks

2184Loading Placeholder BlocksMensajes de estadoBloques de marcador de posición redondeados y tenues que sustituyen a un avatar y líneas de texto apiladas mientras se carga el contenido, con una banda de luz diagonal que los recorre sincronizadamente.

Segment Fade Spinner

2224Segment Fade SpinnerMensajes de estadoUn indicador de carga de ocho segmentos radiales que aparecen y desaparecen en secuencia para que un arco brillante parezca perseguirse alrededor del anillo.

2231Single glyph spinnerMensajes de estadoUn anillo giratorio mínimo: un arco fino que gira continuamente para indicar que se está ejecutando una tarea en segundo plano.

Sweeping progress bar

2250Sweeping progress barMensajes de estadoUna barra de carga indeterminada en un marco en forma de píldora, que crece desde la nada hasta todo su ancho y vuelve a la nada en un suave bucle sin fin.

Upload Progress Line

2262Upload Progress LineMensajes de estadoUna barra de progreso delgada y animada que cuenta una tarea como la carga de un archivo desde cero hasta completarse, con una lectura de porcentaje y una animación de finalización al final.

Endless Feed Loader

2347Endless Feed LoaderVisualización de datosUna lista de estilo de noticias que sigue agregando lotes de titulares nuevos a medida que aparece una pequeña rueda giratoria en la parte inferior.

Flight path confirm button

2524Flight path confirm buttonBotonesUn botón de reserva que hace volar un avión pequeño en una vuelta alrededor de su frente mientras tres puntos pulsan, luego se vuelve verde e informa la reserva confirmada.

Abrir el índice completo

Etiquetas

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)