Skip to content
⏳ 4 Meilleurs plugins de barre de progression pour WordPress 2026 (gratuits et payants)

⏳ 4 Meilleurs plugins de barre de progression pour WordPress 2026 (gratuits et payants)

Un lecteur ouvre une page, voit un mur de texte interminable et s’en va. Pas parce que le contenu est mauvais. Le cerveau a besoin d’un repère visuel: combien de lecture reste-t-il, où en suis-je dans le parcours. Une barre de progression résout ce problème par un simple mécanisme de psychologie de la perception.

Mais choisir une extension pour cette tâche est une autre histoire. L’une est conçue pour des barres de compétences dans des portfolios, une autre pour un préchargeur plein écran, une troisième se présente comme un bloc Gutenberg. Si vous vous trompez, vous héritez d’un constructeur de site surdimensionné pour une simple bande.

Voici quatre extensions de barre de progression WordPress éprouvées pour 2026. Gratuites et payantes, basées sur des shortcodes ou des blocs, chacune correspond à un scénario spécifique.

💡 Aperçu rapide:

  • Déterminez où vous avez besoin d’une barre de progression: indicateur de lecture, barre de compétences, préchargeur ou bloc Gutenberg, le choix de l’extension en dépend.
  • Pour les barres de compétences et les portfolios, prenez Progress Bar & Skill Bar: gratuite, légère, 34 designs en Pro.
  • Si vous avez besoin d’un constructeur visuel avec des barres circulaires, linéaires et verticales sans dépendre des shortcodes, StichyX Bar avec prévisualisation en direct et graphismes SVG.
  • Pour les utilisateurs de Gutenberg, Ultimate Blocks: une barre de progression en tant que bloc natif de l’éditeur, plus 35 autres blocs dans le pack.
  • Pour un préchargeur avec un écran de démarrage animé, PageLoader, paiement unique de 26 $.

Tableau comparatif des extensions

Critère

Progress Bar & Skill Bar

StichyX Bar

Ultimate Blocks

PageLoader

Type

Shortcode

Shortcode + constructeur visuel

Bloc Gutenberg

Préchargeur + éditeur

Version gratuite

✅ WP.org

✅ WP.org

✅ WP.org

Payant à partir de

8 $

Gratuit

Version Pro

26 $

Barres circulaires

✅ Pro

✅ (SVG)

Barres linéaires

Barres verticales

Responsive

Animation

Personnalisation des couleurs

Constructeur visuel

✅ Pro

✅ (prévisualisation en direct)

Grilles de compétences groupées

1. Progress Bar & Skill Bar

Interface des paramètres du plugin Progress Bar Skill Bar

Une extension de WpShopMart pour ceux qui ont besoin d’«afficher des compétences en pourcentages» sans dépendances superflues. Installez, activez, générez un shortcode et la barre est déjà sur la page. Pas d’éditeur de blocs, pas d’interface de construction: vous allez dans les réglages, définissez les couleurs et les pourcentages, copiez [PROGRESSBAR_WP id=xx].

La version gratuite propose deux designs: circulaire et linéaire. Les deux sont animés, la barre se remplit de couleur de 0 à la valeur spécifiée au défilement. Sous le capot, une grille Bootstrap assure la réactivité sur mobile, tablettes et ordinateurs sans configuration supplémentaire.

La version Pro à 8 $ (Personal, 1 site) ou 24 $ (Business, illimité) élargit la bibliothèque à 34 modèles et ajoute le tri par glisser-déposer des éléments. On y trouve un graphique en demi-camembert, un graphique semi-circulaire, des arrière-plans sectionnels, des polices de caractères ajustables et un nombre illimité de barres de compétences par page.

Avantages:

  • La version gratuite est entièrement fonctionnelle, sans fonctionnalités bridées.
  • Le shortcode s’insère partout: dans un article, un widget, un thème.
  • 52 avis sur WordPress.org avec une note moyenne de 4,5.
  • Basée sur Bootstrap, elle n’entre pas en conflit avec la plupart des thèmes.

Inconvénients:

  • Pas mise à jour pour les dernières versions majeures de WordPress (v1.5.0 testée jusqu’à 6.7.5).
  • Version gratuite limitée à deux designs.
  • L’interface des paramètres est visuellement datée.

💵 Gratuit / Pro à partir de 8 $.

🔗 Télécharger sur WordPress.org | 🔗 Version Pro

2. StichyX Bar

Constructeur visuel de barre de progression StichyX Bar

Si les designs standards ne conviennent pas et que vous n’avez pas le temps de coder des barres personnalisées manuellement, StichyX Bar vous offre un constructeur visuel avec prévisualisation en direct directement dans le panneau d’administration. Horizontale, verticale, circulaire en SVG: la géométrie se règle en une minute, sans une seule ligne de CSS.

Sous le capot, c’est du JavaScript pur, pas de jQuery, pas de bibliothèques tierces (sauf Chart.js pour les graphiques). Le rendu SVG conserve la netteté sur les écrans retina, et les paramètres d’animation, de 500 à 5000 ms, vous permettent d’adapter le comportement au rythme de la page. Déclencheurs: défilement, survol ou clic.

Le Group Builder mérite une mention spéciale: plusieurs barres sont assemblées en une grille de 1 à 3 colonnes et animées en cascade. Pour un portfolio ou une page «À propos de l’équipe», une grille de compétences prête à l’emploi sans extension de constructeur de page. Les emojis et les icônes à l’intérieur de la barre sont pris en charge nativement.

L’extension est activement développée: v1.2.3 de juin 2026, intégration avec Elementor et Gutenberg, prise en charge d’ACF pour les données dynamiques. Gratuite, sans complications de version Pro.

Avantages:

  • Constructeur visuel avec prévisualisation en direct dans le panneau d’administration.
  • Trois géométries (horizontale, verticale, circulaire SVG) dans une seule extension.
  • Group Builder pour des grilles de compétences avec animation en cascade.
  • JavaScript vanilla, ne charge pas jQuery.

Inconvénients:

  • Seulement 10 installations actives sur WordPress.org, l’extension est très récente.
  • Un seul développeur, aucune garantie de support à long terme.
  • Pas de préchargeur ni d’indicateur de lecture (barres de contenu uniquement).

💵 Gratuit.

🔗 Télécharger sur WordPress.org

3. Ultimate Blocks

Bloc barre de progression dans l'éditeur Gutenberg du plugin Ultimate Blocks

Il ne s’agit pas simplement d’une extension de barre de progression, mais d’un ensemble complet de 36 blocs Gutenberg, dont l’un est la barre de progression. Elle s’installe comme un bloc standard dans l’éditeur: vous sélectionnez un cercle ou une ligne, définissez la couleur, l’épaisseur, les pourcentages, et la barre s’anime au défilement.

Le principal atout d’Ultimate Blocks est le contexte. La barre de progression n’est pas ici un outil isolé, mais fait partie d’un écosystème: dans le même article, vous pouvez ajouter un contenu à bascule (accordéon), une table des matières, un appel à l’action, un bloc d’avis avec balisage schema. Pas de shortcodes, tout est natif dans Gutenberg.

L’extension est activement développée: version 3.5.7 de juin 2026, plus de 50 000 installations actives, 728 avis avec une note moyenne de 5 étoiles. La version gratuite est généreuse: barre de progression, filtre de contenu, notation par étoiles et une vingtaine d’autres blocs sans paiement.

Avantages:

  • Intégration complète à Gutenberg, pas besoin d’apprendre une nouvelle interface.
  • 36 blocs dans une seule extension, la barre de progression n’est que l’un d’entre eux.
  • Développement actif (mise à jour de juin 2026).
  • Balisage schema dans les blocs Avis et Tutoriel.

Inconvénients:

  • La barre de progression n’est pas la fonction principale, mais l’une des 36.
  • Ne convient pas aux thèmes non compatibles avec Gutenberg.
  • Certains blocs (Coupon, Chronologie) uniquement dans la version Pro.

💵 Version gratuite / Pro.

🔗 Télécharger sur WordPress.org

4. PageLoader

Écran de chargement avec barre de progression du plugin PageLoader

PageLoader répond à un besoin différent: il ne s’agit pas d’un indicateur de lecture ou d’une barre de compétences, mais d’un préchargeur plein écran avec une barre de progression. Le visiteur arrive sur le site et voit un écran d’accueil animé. Quand la page est prête, le préchargeur disparaît en douceur.

Dans les réglages, vous définissez un délai ou un pourcentage de chargement réel, une image de fond (la vôtre ou issue de la bibliothèque), une icône, un texte. La barre de progression peut être placée n’importe où à l’écran, vous en ajustez la couleur et l’épaisseur. L’éditeur visuel intégré montre les modifications en temps réel, sans avoir à jongler entre l’administration et le site.

Le plugin est compatible avec tous les thèmes et tous les appareils. Vendu sur CodeCanyon sans version gratuite: paiement unique, pas d’abonnement.

Avantages:

  • Le seul préchargeur plein écran de la sélection.
  • Éditeur visuel avec aperçu instantané.
  • Calibrage fin du timing de chargement.
  • Animations d’apparition et de disparition fluides.

Inconvénients:

💵 26 $ en paiement unique (12 mois de support).

🔗 Page sur CodeCanyon | 🔗 Démo en ligne

Les barres de progression sont une micro-fonctionnalité, et il n’y a aucun intérêt à payer trop cher pour cela avec un constructeur de site à 50 blocs. Voici trois règles de sélection.

Si le site utilise l’éditeur classique et que vous avez besoin de barres de compétences, prenez Progress Bar & Skill Bar. Le shortcode [PROGRESSBAR_WP id=xx] s’insère dans n’importe quel bloc de texte, widget ou thème. La version gratuite couvre 80% des besoins, la version Pro à 8 $ élargit le design.

Si vous avez besoin d’un constructeur visuel et de plusieurs géométries sans être lié à un éditeur particulier, StichyX Bar avec son aperçu en direct et ses graphiques SVG. Les barres horizontales, circulaires et verticales se paramètrent dans l’administration en une minute.

Si le site est sous Gutenberg et que la barre de progression n’est qu’un besoin parmi d’autres, installez Ultimate Blocks. La barre de progression est livrée avec un bloc de table des matières, un accordéon, un bloc CTA et un bloc Review. Un seul plugin au lieu de cinq.

Si vous avez besoin d’un préchargeur plein écran, PageLoader. Le seul outil de la sélection pour un écran d’accueil de chargement, avec un paiement unique sans abonnement.

Dans la vidéo ci-dessus, le processus pas à pas pour installer et paramétrer une barre de progression dans WordPress: du choix du plugin à la publication sur une page.

⁉️🤔 Foire aux questions

Quelle est la différence entre une barre de progression et un préchargeur?

Une barre de progression affiche un pourcentage à l’intérieur du contenu: compétence, étape d’un tunnel, indicateur de lecture. Un préchargeur est un écran d’accueil qui s’affiche avant le chargement du site: le visiteur voit une barre ou une animation pendant que la page se construit. PageLoader est un préchargeur; Progress Bar & Skill Bar et StichyX Bar sont des barres de contenu.

Peut-on installer une barre de progression sans plugin?

Techniquement oui, avec du HTML <progress>, des animations CSS et du JavaScript. Mais sans plugin, vous perdez: l’éditeur visuel, l’adaptation responsive clé en main, l’insertion facile par shortcode ou par bloc. Pour un utilisateur non technique, un plugin fait gagner 2 à 3 heures de codage manuel par barre.

Quel plugin est le plus adapté à Gutenberg?

Ultimate Blocks, le seul de la sélection à proposer un bloc Gutenberg natif. La barre de progression s’insère comme un bloc, les réglages se font dans la barre latérale de l’éditeur. Pas besoin de quitter l’interface, de copier des shortcodes ou de basculer vers l’administration. StichyX Bar prend aussi en charge un bloc Gutenberg, mais son cœur de métier est le constructeur visuel, pas l’écosystème de blocs.

Une barre de progression a-t-elle un impact sur la vitesse du site?

Un plugin de qualité (Progress Bar & Skill Bar, StichyX Bar) ajoute 2 à 5 Ko de CSS et 1 à 3 Ko de JS, cela n’affecte pas le LCP. Ultimate Blocks charge davantage en raison des 36 blocs, mais de manière asynchrone et uniquement ceux qui sont utilisés. Les préchargeurs (PageLoader) se chargent en premier et peuvent ajouter 200 à 500 ms au FCP, ce qui mérite réflexion. Les quatre plugins de la sélection chargent leurs styles de façon asynchrone et ne bloquent pas le rendu.

Faut-il une version Pro pour les barres circulaires?

Cela dépend du plugin. Progress Bar & Skill Bar: barres circulaires uniquement en Pro (8 $). StichyX Bar: barres circulaires SVG gratuites dans le constructeur visuel. Ultimate Blocks: barres circulaires et linéaires gratuites dans le bloc Gutenberg.

💎 Quoi installer en 2026: le verdict final

Il n’y a pas de réponse universelle, c’est le contexte qui dicte le choix.

  • Si le site est sous l’éditeur classique et que vous avez besoin de barres de compétences, Progress Bar & Skill Bar. 34 designs en Pro, shortcode sans dépendance à l’éditeur, basé sur Bootstrap.
  • Si vous avez besoin de plusieurs géométries avec un aperçu en direct, StichyX Bar. Constructeur visuel, cercles SVG, grilles de compétences et pas une ligne de CSS.
  • Si le site vit sous Gutenberg, Ultimate Blocks. Barre de progression en bloc natif, plus table des matières, accordéon et CTA dans un seul plugin.
  • Si vous avez besoin d’un écran d’accueil de chargement, PageLoader. La seule option parmi les quatre qui couvre spécifiquement un préchargeur, pas des barres de contenu.

Commencez par la version gratuite de Progress Bar & Skill Bar: en 5 minutes, vous installerez la première barre et saurez si deux designs vous suffisent. Et vous, quel plugin de barre de progression utilisez-vous? Dites-le en commentaire.