How to Add a Progress Bar in WordPress (Skills, Goals and Reading Progress)
By Saurabh Pandey · · 1 min read
On this page
A progress bar turns a number into something visitors understand instantly: how skilled you are in a tool, how close a fundraiser is to its goal, or how far through an article a reader is. Here are three ways to use one in WordPress.
1. Skill bars with Elementor (free)
- Edit the page with Elementor and drag in the Progress Bar widget.
- Enter a title (for example WordPress), set the percentage, and optionally show the inner text.
- Style the bar color, height and typography in the Style tab.
- Duplicate it for each skill.
The bar animates when it scrolls into view. Keep percentages realistic; "100% in everything" looks less credible than honest numbers.
2. Goal bars for fundraisers and launches
Use the same widget to show a donation or pre-order goal, such as 65% of target reached. Update it regularly, or use a donation plugin that calculates progress automatically (see adding a donation button).
3. Reading progress bar on blog posts
A thin bar at the top of the screen that fills as readers scroll. Options:
- A lightweight reading-progress plugin, set to show only on posts.
- Elementor Pro users can add a reading progress element through the theme or a small custom code snippet.
Keep it subtle: 3 to 5 pixels tall, in your brand color.
Block editor option
Several block plugins add progress bar blocks. You can also create a simple bar with two Group blocks: an outer one with a light background and an inner one with a set width and brand color.
Where progress bars work best
- Portfolio and resume pages (see building a resume website).
- Donation and crowdfunding pages.
- Long tutorials and guides.
Frequently asked questions
Is the Elementor Progress Bar widget free?
Yes, the Progress Bar widget is included in free Elementor.
What is a reading progress bar?
A thin bar at the top of a blog post that fills as the visitor scrolls, showing how much is left to read.
Do progress bars help conversions?
On portfolios they make skills easy to scan, on donation pages they show momentum, and on long articles they encourage people to keep reading. Keep numbers honest.
Will a progress bar slow my site?
Elementor's widget and a small reading-bar plugin are lightweight. Avoid stacking many animation plugins.
