Composants

progress

Explorez les aperçus interactifs, trouvez les bons composants et intégrez les composants ouverts à votre projet avec leur code source.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

27 sur 27

Progress ring

1538Progress ringMessages d’étatUne jauge circulaire qui balaie de zéro à sa valeur tandis que le nombre au milieu compte, avec deux marques de seuil qui s'allument lorsque l'arc les dépasse.

1618Loader iconIcônesUn indicateur occupé en trois lectures : un anneau trois quarts, un anneau de poursuite de points et quatre lames tournantes.

Hold to delete

1636Hold to deleteBoutonsUn bouton destructeur qui ne se déclenche qu'une fois que le pointeur est maintenu enfoncé suffisamment longtemps pour qu'une barre de remplissage le traverse et rembobine dès que vous le relâchez.

Parallax plate gallery

1873Parallax plate galleryDéfilementUne galerie verticale d'accrochage où le numéro d'index surdimensionné de chaque plaque dérive à un rythme différent de celui de la plaque elle-même, avec un rail de progression à défilement le long du bas.

Pinned lateral gallery

1874Pinned lateral galleryDéfilementUne section qui reste en place pendant que votre défilement vertical consiste à faire glisser une rangée de panneaux latéralement, puis se relâche et laisse la page continuer.

Scroll expand stage

1881Scroll expand stageDéfilementUn petit cadre arrondi s'agrandit pour remplir toute la fenêtre à mesure que vous faites défiler, son titre s'éloignant tandis que l'article en dessous s'efface.

Scroll focus column

1882Scroll focus columnDéfilementUne colonne défilante dans laquelle chaque ligne s'estompe et rétrécit lorsqu'elle quitte la bande de lecture et revient à sa pleine présence lorsqu'elle y entre, de sorte que seul le milieu est toujours entièrement solide.

Code cover card

1938Code cover cardFormulairesUne large carte de vérification avec la forme du code d'un côté et un panneau de couverture de l'autre qui remplit une barre de progression au fur et à mesure de la saisie des chiffres.

Fill progress loading text

1958Fill progress loading textMessages d’étatUne étiquette de chargement apparaît comme un léger contour d'elle-même tandis qu'une copie de couleur unie la remplit à partir de la gauche comme une barre de progression en forme de mot, balayant d'avant en arrière pendant que le travail se déroule.

Fill sweep loading text

1959Fill sweep loading textMessages d’étatUne étiquette de chargement dont le contour pâle se trouve sous une copie entièrement colorée qui s'étend depuis la gauche, atteint toute la largeur et ressort, se répétant aussi longtemps que quelque chose se charge.

Labeled progress bar

1988Labeled progress barMessages d’étatUne piste de progression étiquetée dont le remplissage atteint une nouvelle largeur tandis qu'un pourcentage de lecture compte en douceur pour correspondre.

One Question Wizard

2006One Question WizardFormulairesUn formulaire en plusieurs étapes qui affiche une seule question à la fois avec une lecture de la progression, n'avançant que lorsque la question actuelle a une réponse valide.

Segmented progress meter

2032Segmented progress meterMessages d’étatUn indicateur de progression dessiné sous la forme d'une rangée d'encoches qui s'allument à tour de rôle, avec une encoche principale partiellement remplie et une légende nommant l'étape en cours.

Spring Fill Progress

2051Spring Fill ProgressMessages d’étatUne fine piste de progression dont le remplissage glisse à chaque nouvelle valeur sur un ressort, avec une lecture qui compte avec elle.

Task Log Loader

2065Task Log LoaderMessages d’étatUn indicateur fonctionnel qui associe un anneau rotatif imbriqué à un court journal numéroté dont les lignes défilent vers le haut à mesure que chaque étape est terminée.

Concentric Ring Chart

2088Concentric Ring ChartGraphiquesAnneaux de progression imbriqués qui balayent selon leur propre pourcentage sur la monture et partagent un total central en direct, comme une jauge à cadrans multiples.

Concentric goal rings

2128Concentric goal ringsAffichage des donnéesTrois anneaux de progression imbriqués qui se dessinent en séquence à côté d'un affichage de la valeur actuelle et cible de chaque objectif.

Infinite loop path loader

2171Infinite loop path loaderMessages d’étatUn chargeur en forme de huit où un segment brillant dessine sans fin autour d'une faible trace, sa tête et sa queue se déplaçant à des vitesses différentes pour que le tableau de bord respire.

Step goal progress bar

2247Step goal progress barMessages d’étatUne barre de progression arrondie qui suit les étapes terminées sur un total, affichant une étiquette de fraction au-dessus d'un remplissage doucement animé.

Sweeping progress bar

2250Sweeping progress barMessages d’étatUne barre de chargement indéterminée dans un cadre en forme de pilule, passant de rien à toute la largeur et revenant à rien dans une boucle sans fin et lisse.

Upload Progress Line

2262Upload Progress LineMessages d’étatUne barre de progression fine et animée qui compte une tâche comme un téléchargement de fichier de zéro à la fin, avec une lecture en pourcentage et une animation de règlement à la fin.

Reading highlight copy

2410Reading highlight copyEffets de texteUn paragraphe qui s'éclaire mot par mot lorsque vous le faites défiler, laissant les mots lus clairs et les mots non lus atténués, de sorte que la position de défilement sert également de position de lecture.

Download Sweep Progress

2491Download Sweep ProgressBoutonsUn bouton de téléchargement où le panneau d'icônes se développe sur l'étiquette au survol, puis exécute un véritable remplissage de progression et s'installe sur un état terminé après le clic.

Hold to fill pad

2570Hold to fill padBoutonsUn tampon translucide qui se remplit vers le haut à partir de sa base aussi longtemps qu'il est tenu, puis engage et fait clignoter sa bordure lorsque le remplissage atteint le sommet.

Hinged progress button

2688Hinged progress buttonBoutonsUn bouton dont la face pivote vers l'arrière au survol, exposant un plateau où une barre de progression remplit des rafales inégales et disparaît sur toute la largeur.

Send flight button

2724Send flight buttonBoutonsUn bouton lumineux brossé qui joue une courte séquence d'envoi : le glyphe en papier s'envole, une étiquette d'envoi compte ses points, puis un chèque arrive.

Scroll progress rail

2839Scroll progress railDéfilementUne barre fine épinglée en haut d'un panneau déroulant qui se remplit de gauche à droite en synchronisation exacte avec la distance de défilement du contenu et se vide lorsque vous faites défiler vers le haut.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Code cover card
Une large carte de vérification avec la forme du code d'un côté et un panneau de couverture de l'autre qui remplit une barre de progression au fur et à mesure de la saisie des chiffres.
Concentric goal rings
Trois anneaux de progression imbriqués qui se dessinent en séquence à côté d'un affichage de la valeur actuelle et cible de chaque objectif.
Concentric Ring Chart
Anneaux de progression imbriqués qui balayent selon leur propre pourcentage sur la monture et partagent un total central en direct, comme une jauge à cadrans multiples.

Conseils de design

Ouvrir l’index complet

Étiquettes

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)