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

Une quatrième catégorie, le plugin qui sait tout faire

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

Je vous propose 48 solutions au

 

Indicateur de progression - Plugin

PAS ENCORE DE SERVICE

 

Indicateur de progression - Menu

Brielle Monica - Progression verticale

Caractéristiques

  • CSS, JS, jQuery
  • Menu fixe, très discret avec rollover
  • Slider vertical sans point d'ancrage
  • Défilement : [curseur]

Image cliquable pour voir l'exemple

la barre de progression verticale par curseur

Références

Site web

[Créé / modifié] [24-02-2022 / 24-02-2022]

Css Script - Progression verticale

Caractéristiques

  • CSS, JS, rien d'autre
  • Pas de dépendance
  • Slider vertical avec point d'ancrage
  • Défilement : [curseur]

Image cliquable pour voir l'exemple

la barre de progression verticale par curseur

Références

Site web

[Créé / modifié] [10-01-2022 / 10-01-2022]

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]

Mazal Sara - Progression horizontale

- Pour les sites d'une seule page

Caractéristiques

  • CSS, JS, Particles.js, jQuery
  • Défilement : [Glissement d'un titre de menu à l'autre]
  • Sticky menu
  • Israël

Image cliquable pour voir l'exemple

Progression du scroll avec affichage du suivi sous le menu horizontal

Références

Site web

[Créé / modifié] [02-01-2022 / 02-01-2022]

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

Bhatia Shivam - Vertical

Caractéristiques

  • CSS, Javascript
  • Le plus simple du plus simple : Remplacer la couleur de l'ascenseur vertical, qui donne déjà toutes les indications, par une couleur plus flashy
  • Intruction CSS: 'body::-webkit-scrollbar'
  • Pour le même prix vous avez le menu
  • Dublin, Irelande

Image cliquable pour voir l'exemple

ascenseur de progression

Références

Site web

[Créé / modifié] [07-02-2022 / 07-02-2022]

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 (2) - Progression horizontale

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]

Grozdic Ivan - Progression circulaire

Caractéristiques

  • CSS, Unicons.css, JS, jQuery
  • Défilement : [cercle en bas à droite]
  • J'aime beaucoup : Discret et efficace car couplé au retour en haut de page et prévu pour le mode jour/nuit
  • Serbie

Image cliquable pour voir l'exemple

la barre de progression circulaire

Références

Site web

Site de l'auteur

[Créé / modifié] [10-01-2022 / 10-01-2022]

iGadget - Vertical

Caractéristiques

  • CSS, jQuery
  • Compteur vertical à gauche : [de 1 à 100]
  • J'ai mis les chiffres à gauche en blanc pour qu'ils soient bien visibles
  • Berlin, Allemagne

Image cliquable pour voir l'exemple

compteur de progression gauche

Références

Site web

[Créé / modifié] [19-01-2022 / 19-01-2022]

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]

MulliganRyan (2) - Horizontal

Caractéristiques

  • CSS, Bootstrap.css, JS, jQuery
  • Défilement : [barre haute horizontale sous un 'sticky' menu]
  • Présentation très clean
  • Denver, USA

Image cliquable pour voir l'exemple

barre de progression haute et sticky menu

Références

Site web

[Créé / modifié] [29-04-2022 / 29-04-2022]

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]

Prieto Ricardo - Horizontal

Caractéristiques

  • CSS pur
  • Défilement : [barre haute horizontale]
  • Classique
  • Seville, Espagne

Image cliquable pour voir l'exemple

barre de progression horizontale classique

Références

Site web

[Créé / modifié] [19-01-2022 / 19-01-2022]

Roberts Calvin - Info bulle

Caractéristiques

  • CSS, JS, rien d'autre
  • L'information est accrochée au curseur de la souris (j'ai représenté la souris pour une meilleure compréhension)
  • Pas utilisable sur mobile
  • Très original
  • Londres, Angleterre

Image cliquable pour voir l'exemple

barre de progression en info bulle sur la souris

Références

Site web

[Créé / modifié] [19-01-2022 / 19-01-2022]

Roberts Calvin - Mètre ruban

- Nécessite absolument :
'stopExecutionOnTimeout - 1b93190375 e9ccc259df3a57c1 abc0e64599724 ae30d7ea4c6877 eb615f89387.js'

Caractéristiques

  • CSS, JS
  • Proposition rigolote et très originale
  • Walsall, Angleterre

Image cliquable pour voir l'exemple

metre ruban qui indique la distance lue et le reste a lire

Références

Site web

[Créé / modifié] [07-02-2022 / 07-02-2022]

 

Indicateur de progression - Traitement

Astorino Mattia - Cercle

Caractéristiques

  • CSS, Normalize.css, JS
  • Le curseur, en bas, permet de simuler l'avancement du travail
  • Léger dégradé du cercle
  • Monza, Lombardie, Italie

Image cliquable pour voir l'exemple

ligne de defilement pour slider

Références

Site web

Site de l'auteur

[Créé / modifié] [19-01-2022 / 19-01-2022]

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]

CssLayout.io - Ligne

- Tout en CSS sur ce site par Nguyen Phuoc

Caractéristiques

  • CSS pur
  • Le Ba BA du Ba BA
  • Ligne statique d'état

Image cliquable pour voir l'exemple

ligne statique de prositionnement

Références

Site web

[Créé / modifié] [15-02-2022 / 15-02-2022]

DeSandro Dave - Barre

- Nécessite impérativement: "stopExecutionOnTimeout - 1b93190375 e9ccc259 df3a57 c1abc0e64599724 ae30d7 ea4c6877 eb615f89387.js"

Caractéristiques

  • CSS, JS, Imagesloaded.pkgd.js
  • Indique où on en est dans le téléchargement d'images
  • Très pratique
  • Alexandria, VIrginie, USA

Image cliquable pour voir l'exemple

barre de progression en CSS pur

Références

Site web

Site de l'auteur

[Créé / modifié] [29-04-2022 / 29-04-2022]

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]

Farahmand Peyman - Cercle

Caractéristiques

  • CSS, JS, jQuery
  • Plus le pourcentage est élevé plus le bleu est foncé
  • Possibilité de faire varier le pourcentage avec le curseur dans l'exemple ci-dessous
  • Le chiffre du pourcentage est inscrit au centre du cercle
  • Mashhad, Khorasan, Iran

Image cliquable pour voir l'exemple

cercle de defilement avec une variation sur la couleur bleue

Références

Site web

[Créé / modifié] [27-01-2022 / 27-01-2022]

Foolish Developer - Cercle

Caractéristiques

  • CSS pur
  • Tutoriel bien expliqué
  • Pourcentage dans le cercle de progression

Image cliquable pour voir l'exemple

cercle de progression simple

Références

Site web

[Créé / modifié] [02-01-2022 / 02-01-2022]

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]

Gallo Juani - Barre

Caractéristiques

  • CSS, JS, React.js
  • La couleur change en permanence
  • L'unité de progression est très sympathique
  • On peut changer la largeur du container sans incidence
  • Buenos Aires, Argentine

Image cliquable pour voir l'exemple

barre de defilement en couleur

Références

Site web

[Créé / modifié] [15-02-2022 / 15-02-2022]

Geedmo - Cercle

Caractéristiques

  • CSS pur
  • Presque un tuto pour démarrer
  • Tous les états sont déclarés dans le CSS de zéro à cent par pas de cinq
  • Argentine

Image cliquable pour voir l'exemple

cercle de defilement programme par pas de cinq, de 0 a 100

Références

Site web

[Créé / modifié] [10-03-2022/ 10-03-2022]

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]

Jen Ning Ho - Progression par poste

Caractéristiques

  • CSS, Normalize.css
  • Défilement : [poste par poste]
  • Le positionnement est aussi indiqué par une petite flèche qui bouge de haut en bas, au dessus du rond jaune
  • Le rollover sur le rond jaune à venir est aussi une flèche mais fixe
  • Malaisie

Image cliquable pour voir l'exemple

progression et positionnement par etape

Références

Site web

[Créé / modifié] [07-02-2022 / 07-02-2022

Khallouk Abdelkarim - Progression par poste

Caractéristiques

  • CSS, JS, rien d'autre
  • Défilement : [poste par poste]
  • Le défilement est aussi indiqué par un compteur
  • Casablanca, Maroc

Image cliquable pour voir l'exemple

progression d'affichage par etape

Références

Site web

[Créé / modifié] [27-01-2022 / 27-01-2022

Marinenko Alex - Cercle

Caractéristiques

  • CSS pur
  • Trois designs très courants
  • Utah, USA

Image cliquable pour voir l'exemple

progression d'affichage par cercle en CSS pur

Références

Site web

[Créé / modifié] [10-03-2022 / 10-03-2022]

Massad Tucker - Cercle

Caractéristiques

  • CSS, JS, jQuery
  • Défilement : [cercle avec indicateur de position]
  • Le cercle est représenté en dégradé
  • Design agréable
  • Boston, Massachusetts, USA

Image cliquable pour voir l'exemple

progression d'affichage par poste, ecran par ecran

Références

Site web

Site de l'auteur

[Créé / modifié] [14-05-2022 / 14-05-2022]

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]

Orcsik Antal - Cercle et camembert

Caractéristiques

  • CSS, JS, jQuery
  • Défilement : [cercle et camembert]
  • 3 solutions qui résument très bien les possibilités de base
  • Budapest, Hungrie

Image cliquable pour voir l'exemple

la barre de progression circulaire et le camembert

Références

Site web

Site de l'auteur

[Créé / modifié] [10-01-2022 / 10-01-2022]

Pavlas Ondrej - Barre

Caractéristiques

  • CSS, JS
  • Défilement : [étape par étape]
  • La barre passe du rougee au vert en avançant
  • République Tchèque

Image cliquable pour voir l'exemple

la barre de progression horizontale

Références

Site web

[Créé / modifié] [27-01-2022 / 27-01-2022]

Rochford Rauri - Humour

Caractéristiques

  • CSS, JS
  • Défilement : [ ligne, barre verticale puis pourcentage ]
  • Les animations se suivent pour nous expliquer que jamais nous y arriverons !
  • Sydney, Australie

Image cliquable pour voir l'exemple

progression a but humoristique

Références

Site web

[Créé / modifié] [29-04-2022 / 29-04-2022]

Scuderi Carlin - Poste

Caractéristiques

  • CSS, JS, jQuery
  • Défilement : [ On avance de poste en poste après avoir validé ]

Image cliquable pour voir l'exemple

progression par poste apres chaque validation

Références

Site web

[Créé / modifié] [14-05-2022 / 14-05-2022]

Slutzki Adir - Cercle

- Pour relancer l'animation raffraîchir la page

Caractéristiques

  • CSS pur
  • Défilement : [ circulaire et pourcentage ]
  • La taille de l'animation peut être facilement réduite
  • Israël

Image cliquable pour voir l'exemple

progression circulaire avec animation

Références

Site web

[Créé / modifié] [24-02-2022 / 24-02-2022]

Tadaima Studio - Cercle

Caractéristiques

  • CSS pur
  • Défilement : [circulaire]
  • Une animation permet de voir l'évolution
  • Beau travail
  • Madrid, Espagne

Image cliquable pour voir l'exemple

progression circulaire en couleur avec animation

Références

Site web

[Créé / modifié] [24-02-2022 / 24-02-2022]

Tag Tey - Ligne

- Le dégradé représente lui-même la progression : Sombre pour les valeurs faibles, clair pour les valeurs fortes
- Pour un contraste plus prononcé, remplacer $rose/$peach/$teal/$lime par des couleurs plus contrastées (noir/blanc par exemple)

Caractéristiques

  • CSS pur
  • Défilement : [exemple statique]
  • Bien joli effet de dégradé
  • New Jersey, USA

Image cliquable pour voir l'exemple

progression lineaire en degrade de couleurs

Références

Site web

[Créé / modifié] [24-02-2022 / 24-02-2022]

Tudor Ana - Cercle

Caractéristiques

  • CSS pur
  • Défilement : [circulaire]
  • Durée de progression paramétrable
  • Auteur de référence

Image cliquable pour voir l'exemple

progression circulaire en couleur avec animation

Références

Site web

[Créé / modifié] [15-02-2022 / 15-02-2022]

Wythien Eva - Barre

Caractéristiques

  • CSS pur
  • Défilement : [linéaire]
  • Durée de progression paramétrable
  • Arrivée en douceur
  • Valladolid, Espagne

Image cliquable pour voir l'exemple

la barre de progression horizontale en couleur avec animation

Références

Site web

[Créé / modifié] [15-02-2022 / 15-02-2022]

Wyzant - Cercle

Caractéristiques

  • CSS, JS, Vue.js
  • Défilement : [circulaire]
  • Paramètres: Nombre total d'étapes; Vitesse d'animation; Diamètre; largeur de course; Largeur de course intérieure; Fonction de chronométrage; Couleur de départ; Couleur de fin; Couleur du trait intérieur; Dans le sens des aiguilles d'une montre;

Image cliquable pour voir l'exemple

la barre de progression horizontale en couleur avec animation

Références

Site web

[Créé / modifié] [10-03-2022 / 10-03-2022]