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 50 solutions au 20 06 2022

Indicateur de progression, plugin
Indicateur de progression dans le menu
1. Brielle MonicaVertical (JS, jQuery)
2. Css ScriptVertical (CSS, JS)
3. Danks JustinHorizontal (JS, jQuery)
4. El Hattab HakimVertical (JS)
5. Grimsrud AndersVertical (JS)
6. Mazal SaraHorizontal (JS, Particles.js, jQuery)
7. Mulligan RyanVertical (JS, Smoothscroll.js)
8. Ninja SonyaVertical (JS, GSAP)
Indicateur de progression dans la page
1. Bhatia Shivamascenseur (CSS, JS)
2. Choquehuanca CesarHorizontal (CSS pur)
3. Clark GrahamCercle (JS, jQuery)
4. Grimsrud Anders (2)Horizontal (JS)
5. Grozdic IvanCercle (JS, jQuery)
6. iGadgetVertical (CSS, jQuery)
7. Melcer Raoul RenéHorizontal (JS, jQuery, Bootstrap)
8. Mulligan Ryan (2)Ligne + Pc (Bootstrap.css, jQuery)
9. Podles JamesHorizontal (JS, jQuery)
10. Prieto RicardoHorizontal (CSS pur)
11. Riethmuller MikeHorizontal (CSS pur)
12. Roberts CalvinInfo bulle (CSS, JS)
13. Saunders KarlMètre ruban (JS, jQuery)
Indicateur de progression dans le traitement
1. Astorino MattiaCercle (CSS, JS)
2. Atzeni AlessioLigne (JS, Swiper-Bundle)
3. Berglund JacobBarre (CSS, JS)
4. Christensen JonCercle (JS, jQuery)
5. Courouble ThibautHorizontal (CSS pur)
6. CssLayout.ioLigne (CSS pur)
7. DeSandro DaveBarre (CSS, JS)
8. Farahmand PeymanCercle (JS, jQuery)
9. Foolish DeveloperCercle (CSS pur)
10. Fraser MichaelCercle (CSS pur )
11. Gallo JuaniBarre (JS, React.js)
12. GeedmoCercle + Pc (CSS pur)
13. Hanabi JuneCercle (JS, jQuery)
14. Hernando RodrigoCercle (JS, jQuery)
15. Jen Ning HoPoste (CSS pur)
16. Khallouk AbdelkarimPoste (CSS, JS)
17. Marinenko AlexCercle + Pc (CSS pur)
18. Massad TuckerCercle (JS, jQuery)
19. Monica MonbriellePoste (Bootstrap.css, JS, jQuery)
20. Orcsik AntalCercle (JS, jQuery)
21. Pavlas OndrejBarre (CSS pur)
22. Rochford RauriHumour (CSS, JS)
23. Scuderi CarlinPoste (JS, jQuery)
24. Slutzki AdirCercle + Pc (CSS, JS)
25. Tadaima StudioCercle (CSS pur)
26. Tag TeyLigne (CSS pur)
27. Tudor AnaCercle (CSS pur)
28. Wythien EvaLigne (CSS pur)
29. WyzantCercle + Pc (CSS, JS)

Supprimé
1. Design Bombs (supprimé le 19-06-2022, trop proche du travail de Thibaut Courouble)

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

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

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

Références

Site web

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

El Hattab Hakim - 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]
Le serpent indique les paragraphes visibles sur la page
Suède
A sûrement beaucoup inspiré la proposition suivante !!!

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [20-06-2022 / 20-06-2022]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Références

Site web

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

Riethmuller Mike - Horizontal

Caractéristiques

CSS pur
La barre est sous l'en-tête et est visible en partie dès le début
L'épaisseur du trait est idéale
Australie

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [20-06-2022 / 20-06-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

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

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

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

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

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

Références

Site web

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

Courouble Thibaut - Barre

Caractéristiques

CSS pur
En cliquant sur le pourcentage vous faites avancer le curseur
Très pratique
En remplacement de Design Bombs
France

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [20-06-2022 / 20-06-2022]

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

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

Références

Site web

Site de l'auteur

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Références

Site web

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