Componentes

progress

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

Progress ring

1538Progress ringMensagens de statusUm medidor circular que vai de zero até seu valor enquanto o número no meio conta, com duas marcas de limite que acendem conforme o arco passa por elas.

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.

Hold to delete

1636Hold to deleteBotõesUm botão destrutivo que só é acionado depois que o ponteiro é pressionado por tempo suficiente para que uma barra de preenchimento passe por ele e retrocede no momento em que você o solta.

Parallax plate gallery

1873Parallax plate galleryRolagemUma galeria vertical onde o número de índice superdimensionado de cada placa flutua em uma taxa diferente da própria placa, com um trilho de progresso de rolagem na parte inferior.

Pinned lateral gallery

1874Pinned lateral galleryRolagemUma seção que permanece no lugar enquanto a rolagem vertical é gasta arrastando uma linha de painéis lateralmente, depois libera e permite que a página continue.

Scroll expand stage

1881Scroll expand stageRolagemUm pequeno quadro arredondado cresce para preencher toda a janela de visualização conforme você rola, seu título desaparece enquanto o artigo abaixo desaparece.

Scroll focus column

1882Scroll focus columnRolagemUma coluna de rolagem onde cada linha desaparece e diminui à medida que sai da faixa de leitura e volta à presença total ao entrar, de modo que apenas o meio fica totalmente sólido.

Code cover card

1938Code cover cardFormuláriosUm amplo cartão de verificação com o formulário de código de um lado e um painel de cobertura do outro que preenche uma barra de progresso à medida que os dígitos são inseridos.

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.

One Question Wizard

2006One Question WizardFormuláriosUm formulário de várias etapas que mostra uma única pergunta por vez com uma leitura do progresso, avançando apenas quando a pergunta atual tiver uma resposta válida.

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.

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.

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.

Concentric Ring Chart

2088Concentric Ring ChartGráficosAnéis de progresso aninhados que variam em sua própria porcentagem na montagem e compartilham um total central ao vivo, como um medidor com vários mostradores.

Concentric goal rings

2128Concentric goal ringsExibição de dadosTrês anéis de progresso aninhados que se desenham em sequência ao lado de uma leitura do valor atual e alvo de cada meta.

Infinite loop path loader

2171Infinite loop path loaderMensagens de statusUm carregador em forma de oito onde um segmento brilhante desenha indefinidamente em torno de uma trilha tênue, sua cabeça e cauda se movendo em velocidades diferentes para que o painel respire.

Step goal progress bar

2247Step goal progress barMensagens de statusUma barra de progresso arredondada que rastreia as etapas concluídas de um total, mostrando um rótulo de fração acima de um preenchimento suavemente animado.

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.

Reading highlight copy

2410Reading highlight copyEfeitos de textoUm parágrafo que se ilumina palavra por palavra conforme você o rola, deixando as palavras lidas brilhantes e as não lidas esmaecidas, de modo que a posição de rolagem também funciona como uma posição de leitura.

Download Sweep Progress

2491Download Sweep ProgressBotõesUm botão de download onde o painel de ícones se expande sobre o rótulo ao passar o mouse, executa um preenchimento de progresso real e chega ao estado concluído após o clique.

Hold to fill pad

2570Hold to fill padBotõesUm bloco translúcido que preenche para cima a partir de sua base enquanto é segurado e, em seguida, confirma e pisca sua borda quando o preenchimento atinge o topo.

Hinged progress button

2688Hinged progress buttonBotõesUm botão cuja face gira para trás ao passar o mouse, expondo uma bandeja onde uma barra de progresso preenche rajadas irregulares e desaparece em toda a largura.

Send flight button

2724Send flight buttonBotõesUm botão de luz escovado que reproduz uma curta sequência de envio: o glifo de papel voa, uma etiqueta de envio conta seus pontos e, em seguida, um cheque aparece.

Scroll progress rail

2839Scroll progress railRolagemUma barra fina fixada na parte superior de um painel rolável que preenche da esquerda para a direita em sincronia exata com a distância que o conteúdo é rolado e volta quando você rola para cima.

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.

Code cover card
Um amplo cartão de verificação com o formulário de código de um lado e um painel de cobertura do outro que preenche uma barra de progresso à medida que os dígitos são inseridos.
Concentric goal rings
Três anéis de progresso aninhados que se desenham em sequência ao lado de uma leitura do valor atual e alvo de cada meta.
Concentric Ring Chart
Anéis de progresso aninhados que variam em sua própria porcentagem na montagem e compartilham um total central ao vivo, como um medidor com vários mostradores.

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)