Componentes

carregando

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

27 de 27

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.

1618Loader iconÍconesUm indicador ocupado em três leituras: um anel de três quartos, um anel de perseguição de pontos e quatro lâminas giratórias.

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.

Button set

1673Button setBotõesUma família completa de botões que abrange seis intenções, seis tamanhos, formatos somente de ícones e um estado de carregamento que alterna em um botão giratório sem que o botão altere a largura.

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.

Fill progress loading text

1958Fill progress loading textMensagens de statusUm rótulo de carregamento é um contorno tênue de si mesmo, enquanto uma cópia de cor sólida o preenche a partir da esquerda, como uma barra de progresso no formato da palavra, movendo-se para frente e para trás enquanto o trabalho acontece.

Fill sweep loading text

1959Fill sweep loading textMensagens de statusUma etiqueta de carregamento cujo contorno tênue fica sob uma cópia totalmente colorida que entra da esquerda, atinge toda a largura e drena de volta, repetindo-se enquanto algo é carregado.

Labeled progress bar

1988Labeled progress barMensagens de statusUma trilha de progresso rotulada cujo preenchimento atinge uma nova largura enquanto uma leitura percentual conta suavemente para corresponder.

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.

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.

Breathing dot loader

2117Breathing dot loaderMensagens de statusPontos que permanecem parados e respiram em vez de se moverem, inchando e escurecendo, de modo que a linha parece um batimento cardíaco lento.

Content Loading Card

2129Content Loading CardMensagens de statusUm espaço reservado em forma de cartão que respira com um pulso lento de opacidade enquanto um grande bloco de imagem e duas linhas de texto ainda estão sendo carregados.

Curtain line loader

2138Curtain line loaderMensagens de statusUma cortina de carregamento que se esconde atrás de uma linha brilhante, mostrando o conteúdo final em vez de esmaecê-lo.

Expanding ring loader

2151Expanding ring loaderMensagens de statusAnéis finos que crescem a partir de um único ponto e desaparecem à medida que se alargam, lançados um após o outro para que o pulso nunca pare.

Hopping dot loader

2167Hopping dot loaderMensagens de statusUma pequena fileira de pontos que saltam em uma onda itinerante, cada um saindo do chão uma batida após o ponto ao lado.

Loading Placeholder Blocks

2184Loading Placeholder BlocksMensagens de statusBlocos de espaço reservados arredondados e escuros que representam um avatar e linhas de texto empilhadas enquanto o conteúdo é carregado, com uma faixa de luz diagonal passando por eles em sincronia.

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.

Sweeping progress bar

2250Sweeping progress barMensagens de statusUma barra de carregamento indeterminada em uma estrutura em forma de pílula, crescendo do nada até a largura total e voltando ao nada em um loop suave e infinito.

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.

Endless Feed Loader

2347Endless Feed LoaderExibição de dadosUma lista de estilo de notícias que continua anexando novos lotes de manchetes enquanto um pequeno botão giratório na parte inferior aparece.

Flight path confirm button

2524Flight path confirm buttonBotõesUm botão de reserva que faz um pequeno avião girar em torno de sua face enquanto três pontos pulsam, depois fica verde e informa que a reserva foi confirmada.

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.
Breathing dot loader
Pontos que permanecem parados e respiram em vez de se moverem, inchando e escurecendo, de modo que a linha parece um batimento cardíaco lento.
Button set
Uma família completa de botões que abrange seis intenções, seis tamanhos, formatos somente de ícones e um estado de carregamento que alterna em um botão giratório sem que o botão altere a largura.

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)