Sign up for our newsletter and be the first to get all the latest Qode news and updates.
BACK TO TOP

How to Create a Progress Bar in WordPress

How to Create a Progress Bar in WordPress

A progress bar is a powerful indicator that tells users how much progress they’ve made with a certain task or skill. It informs them about the remaining download and loading times, or how much money has been gathered in a fundraiser they took part in, and much more.

Progress bars are practical and provide feedback that makes users feel engaged and motivated to stick around until the fulfillment of their goals. They see the progress they’ve made through a specific process, and they’re highly driven to fully complete it. That sense of accomplishment activates some feel-good chemicals in their brains so they become happy and content with themselves. Furthermore, a progress bar annihilates a sense of anxiety users can experience when they’re about to start a multi-page online survey, as it tells them exactly how long the survey is or how many questions they have yet to complete.

Progress Bar GIF

To create a progress bar in WordPress, the easiest and the fastest way to go about that is by installing a plugin to add this functionality to your website, as the platform doesn’t pack it by default. We will show you how to do it by using the Progress Bar & Skill Bar plugin. Furthermore, we will also talk about adding a reading progress bar to your posts with the help of the Worth the Read plugin, in case you’d like to inform users about the reading progress they’ve made. And since there are also some premium themes on the market that allow users to build progress bars without having to use a plugin, we will walk you through that process as well and use our Bridge theme as an example.

How to Create a Progress Bar in WordPress Using the Progress Bar & Skill Bar Plugin

While there are numerous plugins that enable users to add progress bars to their websites, the one we’d like to recommend is the Progress Bar & Skill Bar plugin.

Progress Bar & Skill Bar

This is a neat plugin that allows users to add customized progress bars to their WordPress websites without too much hassle.

To start creating your progress bar, go to ProgressBar WP > Add New ProgressBar.

Add New Progress Bar

You can enter a custom title for your progress bar, choose between two free design templates (the pro versions currently pack 34 layouts, including the chart style and half-pie chart templates), and set the percentage. On the right-hand side of the screen, there’s a list of all elements you can change, including the title color, title font height and weight, font family, background color, etc.

When you finish, you can copy the shortcode listed near the bottom of the page and paste it to any page or post. And if you know how to code, you can additionally modify your progress bar using CSS.

Progress Bar Shortcode

All in all, this plugin is a great solution that allows you to modify a decent amount of attributes and create a progress bar that suits your needs. The pro version comes with even more options, including various animation effects and the possibility to change all the colors of the progress bar (including the border color). All in all, if you want to go the plugin way, you won’t go wrong with the Progress Bar & Skill Bar.

Qode Themes: Top Picks
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

How to Add a Reading Progress Bar in WordPress

The next thing we’d like to show you is how to add a reading progress bar to your posts. That way, you could let users understand how far they have scrolled through a specific page.

The easiest way of going about it is by installing the Worth the Read plugin.

Worth the Read

This plugin is minimal and simple, and the reading progress bar doesn’t show up on the screen until users start to scroll down the page. When the scrolling stops, the bar is gone and it’ll reappear only when a user continues to explore the content.

You can add it to pages, posts, and custom post types. The plugin lets you choose the placement of the progress bar, offset, include comments, and style it to your taste. It’s possible to change the thickness of the bar, foreground and background colors, the color of the comments, enable shadow, and more.

Progress Bar Shortcode Functionality

We especially liked the Time Commitment feature that can be added above or below the title and above the content. You can specify the average number of words users are expected to read in one minute, and that number varies greatly from one language to the other. For instance, the average reading speed of English-speaking adults is about 200 – 250 words per minute, so you can set the default value to 200.

How to Create a Progress Bar in WordPress Using a Qode Interactive Theme

The easiest and fastest way of adding a progress bar to your website is by using a theme that packs the Progress Bar shortcode. That way, you won’t have to look around for third-party services to enhance the functionality of your site, as all you need comes bundled with the theme.

Bridge is a versatile premium theme that packs a collection of whopping 515+ demos that can be used to build pretty much any kind of website you have in mind. It packs a compendium of practical shortcodes, one of them being the Progress Bar shortcode that enables you to effortlessly add a progress bar to your site. And we’ll show you now how to go about that.

For starters, go to the page where you wish to display the progress bar or create the new one. We’ll start from scratch so we’ll select Pages > Add New.

Add New Page

We’ll explain how to create the progress bar using the three most popular builders – WPBakery Page Builder, Elementor, and Gutenberg. Let’s kick things off with the WPBakery Page Builder.

WP Bakery Page Builder

Once you’ve selected the preferred page builder, click on Add Element.

WP Bakery Add Element

Then, type Progress Bar in the search field. Bridge comes with three progress-bar-related shortcodes, one of which allows you to customize the progress bar icon, while the other two enable you to add either a vertical or a horizontal progress bar to your site. For testing purposes, we’ve selected the Progress Bar – horizontal shortcode.

Progress Bar Shortcode Search

The shortcode itself lets you customize numerous details to your liking, including the title, title color, percentage, percentage color, percentage font size and weight, active and inactive background color, border color, progress bar height, and much more.

Progress Bar Horizontal Settings

Once you adjust all the settings to your requirements and you’re happy with how things look, save your changes.

In Elementor, once again, you can find the shortcodes by using the search option placed at the upper left corner of the screen.

Elementor Progress Bar Search

Select the shortcode you need for your site and drag it to the appropriate field on the right. Customization options are displayed on the left, and you can adjust the progress bar so that it meets your needs.

Elementor Progress Bar Settings

And lastly, let’s see how to create a progress bar in WordPress using Gutenberg.

To insert custom shortcodes to your page, it’s necessary to add the Custom HTML block first.

Custom HTML Block

Then, you need to paste the shortcode snippet into the block. We’ve opted for the Progress Bar – Horizontal shortcode and this is the snippet we’ve added to the block:

[progress_bar title_tag="h3" percent_font_weight="600" gradient="yes" title="Test" title_color="#dd3333" percent="72" percent_color="#1e73be" percent_font_size="30px" active_background_color="#81d742" active_border_color="#eeee22" noactive_background_color="#000000" noactive_background_color_transparency="0.5" height="150" border_radius="20px"]

You can adjust all parameters that are placed between quotation marks according to your preferences.

If you want to use another progress-bar-related shortcode or you’d like to make alterations without having to bother with hex codes etc., the best way to go about it is to create a new page using the WPBakery Page Builder. Next, add the shortcode you want and alter it to your liking.

Progress Bar Icon Settings

Save the changes and then switch to Classic Mode.

Classic Mode

The shortcode will appear in the text editor.

Text Editor

All that’s left to do is copy it and then add it to the Custom HTML block. You can use this method to add any custom shortcode you like to Gutenberg.

Conclusion

Progress bars are useful additions to websites as they act as strong motivators and encourage people to keep going until their complete tasks. They also help brands be more transparent with users, as people will always know at what point they stand. We introduced you to several methods of creating a progress bar in WordPress, but now it’s up to you to choose the way that works best for you. Our advice would be to go with a premium theme that already includes the Progress Bar shortcode, simply because there’s no risk of a progress bar plugin not working with your theme and also because the shortcode comes with more customization options. At the end of the day, the latter is of great importance since it’s not enough for the progress bar to be functional. It needs to look nice as well. Progress bars are displayed on pages at all times for users to see, so might as well design them in an eye-appealing way, which, with the right theme and a shortcode, isn’t difficult at all.

Post your comment

Comments0