Componentes

status

Explore prévias interativas, encontre os componentes ideais e incorpore componentes abertos ao seu projeto com o código-fonte incluído.

Crie com um guia Conecte seu agente Explorar modelos de páginas

21 de 21

Orbit loader

1534Orbit loaderÍconesUm indicador de carga cujos três pontos percorrem uma órbita com um terço de volta um do outro, cada um arrastando uma trilha curta, enquanto um arco varre o anel externo na direção oposta.

Assistant Ripple Glow

1665Assistant Ripple GlowFundosUma ondulação em forma de anel se espalha sobre uma duplicata do próprio conteúdo de um painel enquanto sua borda acende enquanto uma tarefa está em execução.

Count badge cluster

1945Count badge clusterMensagens de statusUma fileira de comprimidos de palavras e tokens numéricos compactos para rotular ou contar coisas em linha.

Dot matrix status pill

1950Dot matrix status pillMensagens de statusUm botão de pílula cujo lado esquerdo é uma grade de cinco por cinco pontos reproduzindo um padrão de loop curto para cada estado, com a legenda trocando de passo.

1957Field with status iconFormuláriosUma entrada rotulada cuja borda final mostra um pequeno ícone de verificação ou aviso que desaparece no momento em que a validade do campo muda, sem alterar o layout.

Hairline Tone Badge

1977Hairline Tone BadgeMensagens de statusUm rótulo de comprimido não preenchido cuja borda e texto compartilham a mesma cor, de modo que uma fileira deles parece uma legenda impressa.

Layered ring loader

1989Layered ring loaderMensagens de statusUm emblema centralizado de anéis parciais concêntricos girando em diferentes velocidades e direções, com um título de status e um subtítulo desaparecendo abaixo.

Left Rule Notice

1990Left Rule NoticeMensagens de statusUma mensagem silenciosa em caixa cujo tom é transmitido por uma única régua colorida e grossa que desce pela borda esquerda.

2016Presence Avatar ClustersExibição de dadosDois grupos de avatares sobrepostos, online e offline, onde clicar em um avatar o desliza para o outro grupo enquanto seu retrato muda para ou da escala de cinza.

Quiet Ring Spinner

2020Quiet Ring SpinnerMensagens de statusUm anel de carregamento mínimo de elemento único: um círculo fino com um quarto colorido que gira continuamente para marcar um estado ocupado.

Segmented progress meter

2032Segmented progress meterMensagens de statusUm medidor de progresso desenhado como uma fileira de entalhes que acendem por sua vez, com um entalhe inicial parcialmente preenchido e uma legenda nomeando o estágio atual.

Solid Ring Spinner

2047Solid Ring SpinnerMensagens de statusUm indicador de carregamento em caixa acolchoado: um anel grosso com uma borda colorida girando a uma velocidade linear constante dentro de um painel arredondado.

Spring Fill Progress

2051Spring Fill ProgressMensagens de statusUma trilha de progresso estreita cujo preenchimento desliza para cada novo valor em uma mola, com uma leitura que conta junto com ela.

Sweeping status text

2060Sweeping status textEfeitos de textoUma grande palavra de status que muda em uma batida constante enquanto uma faixa brilhante percorre infinitamente as letras.

Task Log Loader

2065Task Log LoaderMensagens de statusUm indicador funcional que emparelha um girador de anel aninhado com um registro curto e numerado cujas linhas rolam para cima à medida que cada etapa é concluída.

Transfer status card

2070Transfer status cardMensagens de statusUm cartão de transferência de dinheiro que passa de um estado de processamento para um estado concluído, com um ícone giratório se transformando em uma marca de seleção e as duas linhas da conta se fundindo.

Filterable record table

2154Filterable record tableExibição de dadosFiltre dados de clientes, ordene colunas e controle a consulta pela sua aplicação.

Segment Fade Spinner

2224Segment Fade SpinnerMensagens de statusUm indicador de carregamento de oito segmentos radiais que aparecem e desaparecem gradualmente em sequência, de modo que um arco brilhante parece perseguir-se ao redor do anel.

2231Single glyph spinnerMensagens de statusUm girador de anel mínimo: um arco fino que gira continuamente para sinalizar que uma tarefa em segundo plano está em execução.

2245Status AvatarExibição de dadosUm avatar redondo que volta às iniciais sem imagem e pode carregar um pequeno crachá de status online ou empilhá-lo com outros.

Upload Progress Line

2262Upload Progress LineMensagens de statusUma barra de progresso fina e animada que conta uma tarefa como um upload de arquivo de zero até a conclusão, com uma leitura de porcentagem e uma animação de liquidação no final.

Compare estes componentes

Escolha pelo comportamento e pelo layout; depois confira os frameworks disponíveis e os requisitos de acesso na página de cada componente.

Assistant Ripple Glow
Uma ondulação em forma de anel se espalha sobre uma duplicata do próprio conteúdo de um painel enquanto sua borda acende enquanto uma tarefa está em execução.
Count badge cluster
Uma fileira de comprimidos de palavras e tokens numéricos compactos para rotular ou contar coisas em linha.
Dot matrix status pill
Um botão de pílula cujo lado esquerdo é uma grade de cinco por cinco pontos reproduzindo um padrão de loop curto para cada estado, com a legenda trocando de passo.

Orientações de design

Abrir o índice completo

Etiquetas

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)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)billing (10)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 (7)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 (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)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)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)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 (13)finance (10)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 (50)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)log (3)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)product (6)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 (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)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 (21)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)workflow (18)workspace (36)wrapper (3)zoom (4)