How to Add a WordPress Progress Bar?

How to Add a WordPress Progress Bar?

Do you want to create an animated progress bar to reflect the progress for a fundraising campaign, an upcoming release or other specific projects? If that’s the case, you will know the comprehensive instructions on making and customizing a WordPress progress bar here.

Some WordPress themes include a built-in progress bar, but you will have more appearance, color and text options with the use of WordPress Progress Bar plugin. Also, some of the most popular plugins for adding WordPress progress bar are listed at the bottom of this page.

How to Add a WordPress Progress Bar?

Adding a WordPress progress bar requires a bit of technical knowledge, but this process can be a breeze with this easy-to-use “Progress Bar” plugin. The only thing that this plugin does is create a simple yet nice-looking CSS3 progress bar that can be further styled with a shortcode. It has been given 5 out of 5 stars due to a number of modification options, including:

  • Text option
  • Color option
  • Percent option
  • Gradient option
  • Full Width option
  • Localization option

In the following, we will go deeper into some of those options with illustrative examples included. Note that, this plugin has more than 4,000 active installs, and you can download its newest 2.1.2 version through the URL in below.

Free Download:

About Progress Bar Plugin

1. Install & Activate this Plugin

As usual, the first step is to initialize this “Progress Bar” plugin from the WordPress backend. It’s possible to add this plugin via the “Plugin Repository” or “WordPress Uploader”, and you should activate it through the same “Plugins” page like below. Do not “Edit” its plugin file when you don’t know what that means.

Install Progress Bar Plugin

2. Make Customizations to Your Progress Bar

This plugin doesn’t have settings to configure, and you can simply add a progress bar by using the following shortcode. In this example, we’d like to add a new post along with an animated progress bar that is 80% complete.

[wppb progress=80]

This is how your progress bar will look like on the front-end:

Example Progress Bar

By default, the color of this progress bar is set to blue, but it’s possible to change the color schemes by customizing the above code. Meanwhile, you can adjust progress bar’s appearance and add text inside/outside it. Just scroll down and acquire more details.

#1: Adjust Progress Bar Color & Appearance
There are a few color options to choose, including “Red”, “Blue”, “Orange”, “Green” and “Yellow” colors. It’s at your option to create an animated or flat progress bar, and below are several examples for your reference:

  1. Green Progress Bar:
  2. [wppb progress=80 option=green]
  3. Animated Candy Stripe Progress Bar in Yellow Color:
  4. [wppb progress=80 option="animated-candystripe yellow"]
  5. Candy Stripe Progress Bar in Red:
  6. [wppb progress=80 option="animated-candystripe red"]
  7. A Default Progress Bar with a Static Candy Stripe:
  8. [wppb progress=80 option=candystripe]
  9. A Flat Progress Bar (Blue) in Orange Color:
  10. [wppb progress=80 option=flat color=orange]
  11. A Flat Candy Stripe Progress Bar with Purple Color:
  12. [wppb progress=80 option="flat candystripe" color=purple]

Here is a screenshot of how those progress bars look like on the front page:

Progress Bar Color & Appearance

#2: Add Text to Your Progress Bar
Obviously, the above progress bars don’t include any text to help readers understand what they are about. This problem can be easily solved by using the text parameter. This location parameter can also be used to specify whether the text appears outside/inside a progress bar. To display “Add Text Here” within the progress bar, just refer to this shortcode:

[wppb progress=80 location=inside text="My Progress Bar"]

If done correctly, this progress bar will look like this:

Add Progress Bar Text

#3: Display Currency in Your Progress Bar
Your progress bar can be displayed in both number (0-100) and fraction (40/80) forms. This usually displays completion percentage, but you can add dollar signs (like $40/$80) to a fundraising progress bar. It’s inadvisable to use fullwidth option as it may damage the current layout of your website.

[wppb progress="$4400/8000" text="$4400/$8000 Raised"]

The above code will show the currency instead of percentage in your progress bar, with both the collected and target amount included. Just take a look at how it will look like:

Display Currency in Progress Bar

Alternative Options for Adding a WordPress Progress Bar

The above “Progress Bar” provides a complete solution for you to create and style a progress bar in WordPress. But in case you want to have more configuration options and add the progress bar to sidebar widgets, we have the following recommendations. Note that, all those plugins are available for free download through

  • WordBar that lets you create simple progress bar as a WordPress widget. It’s pretty easy to modify the progress bar color via the easy-to-use color picker, and you can decide whether display this progress bar on every post or just a few pages.
  • WP Pace that is built on pace-automatic load progress bar and developed by Adam Schwartz. The coolest thing of this plugin is that there are up to 10 progress bar themes to choose from, such as MacOSX, Bounce, Flash, Minimai, Barbershop, etc.
  • KKProgressbar2 Free – Advanced Progress Bars that acts like a to-do list which segregates tasks and projects so that you will know which task needs to do to complete a project. Only with its premium version can you have an unlimited number of projects and first-class technical support.