Indicateur de progression

Présentation

Pour savoir où votre visiteur est situé dans votre page, dans votre menu ou dans le traitement en cours

Trois catégories : L'indicateur de progression pour menu, page et traitement

En mode mobile vous avez accès à chaque catégorie par un insert au milieu droit de l'écran

Je vous propose 17 solutions au

 

Indicateur de progression - Menu

Danks Justin - Progression horizontale

- Pour les sites d'une seule page
- Belle présentation mais pas responsive

Caractéristiques

  • CSS, JS, jQuery
  • Défilement : [Saut d'un titre de menu à l'autre]
  • Paramétrage possible dans l'exemple ci-dessous
  • Seattle, USA

Image cliquable pour voir l'exemple

suivi de la progression d'affichage d'un menu horizontal

Références

Site web

[Créé / modifié] [28-10-2021 / 28-10-2021]

Grimsrud Anders - Progression verticale

Caractéristiques

  • CSS, Normalize.css, JS
  • Défilement : [Un 'serpent' suit la section et la sous section au niveau du menu vertical gauche]
  • Plus la page affichée est importante plus le serpent est long. Excellent !
  • Oslo, Norvège

Image cliquable pour voir l'exemple

suivi de la progression d'affichage

Références

Site web

[Créé / modifié] [28-10-2021 / 28-10-2021]

Mulligan Ryan - Progression horizontale

Caractéristiques

  • CSS, JS, Smoothscroll.js
  • Défilement : [Soulignement du menu correspondant à la section]
  • Responsive : La ligne de menu est tronquée et le menu défile
  • Denver, USA

Image cliquable pour voir l'exemple

progress nav

Références

Site web

Site de l'auteur

[Créé / modifié] [28-10-2021 / 28-10-2021]

Ninja Sonya - Progression verticale

Caractéristiques

  • CSS, JS, Gsap.js
  • Défilement : [La ligne de menu réagit au niveau du menu vertical gauche]
  • Un tiret s'affiche devant la ligne qui devient plus grosse
  • Gauteng, Afrique du Sud

Image cliquable pour voir l'exemple

suivi de la progression d'affichage par reaction de la ligne de menu

Références

Site web

[Créé / modifié] [28-10-2021 / 28-10-2021]

 

Indicateur de progression - Page

Choquehuanca Cesar - Horizontal

Caractéristiques

  • CSS, Javascript
  • Code minimum
  • Défilement : [barre haute horizontale]
  • Lima, Pérou

Image cliquable pour voir l'exemple

barre de progression haute

Références

Site web

[Créé / modifié] [28-10-2021 / 28-10-2021]

Clark Graham - Progression circulaire

Caractéristiques

  • CSS, JS, jQuery
  • Défilement : [cercle en bas à droite]
  • Bel effet sur le menu également
  • San Francisco, Califormie, USA

Image cliquable pour voir l'exemple

progression d'affichage avec un cercle

Références

Site web

[Créé / modifié] [18-11-2021 / 18-11-2021]

Grimsrud Anders - Progression horizontale (2)

Caractéristiques

  • CSS, Normalize.css, JS
  • Défilement : [barre haute horizontale]
  • Affichage de l'équivalent en pourcentage et en cercle
  • Oslo, Norvège

Image cliquable pour voir l'exemple

suivi de la progression d'affichage en pourcentage

Références

Site web

[Créé / modifié] [28-10-2021 / 28-10-2021]

Melcer Raoul René - Horizontal

Caractéristiques

  • CSS, Normalize.css, Bootstrap.3.3.css, JS, jQuery, Prefixfree.js
  • Lourd en dépendances
  • Défilement : [barre haute horizontale]
  • Zurich, Suisse

Image cliquable pour voir l'exemple

la barre de progression haute

Références

Site web

[Créé / modifié] [28-10-2021 / 28-10-2021]

Podles James - Horizontal

Caractéristiques

  • CSS, JS, jQuery
  • Défilement : [barre haute horizontale]
  • Le titre s'insère dans la barre haute
  • Vancouver, Canada

Image cliquable pour voir l'exemple

barre de progression haute  accueille joliment le titre de la page

Références

Site web

[Créé / modifié] [28-10-2021 / 28-10-2021]

 

Indicateur de progression - Traitement

Atzeni Alessio - Ligne

Caractéristiques

  • CSS, JS, Swiper-Bundle
  • Utilsé dans un slider
  • Indique le temps restant avant le passage à l'image suivante
  • Rome, Italie

Image cliquable pour voir l'exemple

ligne de defilement pour slider

Références

Site web

Site de l'auteur

[Créé / modifié] [10-11-2021 / 10-11-2021]

Berglund Jacob - Barre

Caractéristiques

  • CSS, Normalize.css, JS
  • Utilsé ici par rapport à la position de la souris. Plus la souris se déplace vers la droite plus le pourcentage est elevé
  • Trondheim, Norvège

Image cliquable pour voir l'exemple

ligne de defilement relative au positionnement de la souris

Références

Site web

Site de l'auteur

[Créé / modifié] [10-11-2021 / 10-11-2021]

Christensen Jon - Cercle

Caractéristiques

  • CSS, Normalize.css, JS, jQuery, Modernizr.js, Prefixfree.js
  • Donc pas mal de dépendances
  • Possibilité de rentrer un pourcentage dans l'exemple ci-dessous
  • Minneapolis, USA

Image cliquable pour voir l'exemple

cercle de defilement

Références

Site web

[Créé / modifié] [28-10-2021 / 28-10-2021]

Design Bombs - Barre

Caractéristiques

  • CSS pur
  • En cliquant sur le pourcentage vous faites avancer le curseur
  • Très pratique

Image cliquable pour voir l'exemple

barre de progression en CSS pur

Références

Site web

[Créé / modifié] [10-11-2021 / 10-11-2021]

Fraser Michael - Cercle

Caractéristiques

  • CSS pur
  • La couleur s'intensifie en fonction du pourcentage
  • Le hamster dans sa roue est bien vu

Image cliquable pour voir l'exemple

cercle de defilement changeant de couleur

Références

Site web

[Créé / modifié] [05-11-2021 / 05-11-2021]

Hanabi June - Cercle

Caractéristiques

  • CSS, Normalize.css, JS, jQuery
  • La couleur change en fonction du pourcentage
  • Possibilité de rentrer un pourcentage dans l'exemple ci-dessous
  • J'aurais préféré un vide complet avec un pourcentage de zéro
  • USA

Image cliquable pour voir l'exemple

cercle de defilement changeant de couleur

Références

Site web

[Créé / modifié] [28-10-2021 / 28-10-2021]

Hernando Rodrigo - Cercle

Caractéristiques

  • CSS, JS, jQuery, TweenMax, ImagesLoaded.pkgd.js
  • Ce ne sont pas toujours les mêmes images qui sont chargées
  • On peut ajouter des images aux images déjà téléchargées
  • Santiago, Chili

Image cliquable pour voir l'exemple

cercle de progression du telechargement des images

Références

Site web

[Créé / modifié] [05-11-2021 / 05-11-2021]

Monica Monbrielle - Progression par poste

Caractéristiques

  • CSS, Bootstrap.css, JS, jQuery
  • Bootstrap 4.3, relativement récent
  • Défilement : [poste par poste ou écran par écran]
  • Le défilement est aussi indiqué par une barre et un compteur,... à vous de choisir !

Image cliquable pour voir l'exemple

progression d'affichage par poste, ecran par ecran

Références

Site web

[Créé / modifié] [18-11-2021 / 18-11-2021]