How to Add a Progress Bar in WordPress (Step by Step)

Visual content almost always wins over textual content whenever we view something. And progress bars are the perfect visual content tool for your website which shows the ongoing progress, whether you’re downloading files, raising donations for a cause, or simply filling out a survey. If you have a portfolio website, progress bars could be a nice addition to it.

Progress bars keep users engaged at the same time letting them track their achievements, which makes them feel accomplished and excited. Personally, I feel that progress bars help with the anxiety that users might feel before starting out a multi-page online survey by telling them the survey length and the total number of questions remaining.

This step-by-step tutorial is about to show you the A-Z of how to add a progress bar in WordPress. By the end of this, you will be able to do it on your own. Let’s go right in.

How to Add a Progress Bar in WordPress (Step by Step)

There are some really good plugins available out there that will let you add a progress bar to your post very easily. Today we’ll be using my personal favorite, Ultimate Blocks. Let’s go!

We will start by installing the plugin. So first, we will head over to the WordPress Dashboard, then click on Plugins, then Add New Plugin, and then type in Ultimate Blocks in the search bar, and hit enter. Then just click on the Install Now button and Activate the plugin.

Now go to the post or page where you want to add a progress bar and click on the plus (+) sign. Then type progress bar and click on the Progress Bar block to insert it.

A progress bar will be added like this.

First, add a description of your progress bar and then set the value of the bar.

Now we will head over to the right-hand side options panel. You can change the percentage position and number settings from the block settings. You can also give your bar a stripe effect if it’s a line bar.

Then head over to the Styles tab to further customize the bar style, thickness, dimension, and of course, the color.

This way, you can add more progress bars, or you can simply duplicate the bar and customize it.

That’s all. You are done.

Conclusion

So this was all about how to add a progress bar in WordPress. As you can see, it’s super easy, super convenient.

You can create any type of progress bar (line, circle, half-circle) by following this tutorial. But still, if you want to check out a detailed tutorial on how to add a circle progress bar in WordPress, I have something for you here.

Hope this helped with what you were looking for. Thank you.