/ Plugin Category

/ Design & Themes

/ Themes & Templates

/ Progress Bar

Progress Bar

By Chris Reynolds

Design & Themes / Themes & Templates

Reviewed by Omar Dabbas

Trusted WordPress expert with 20+ years of experience evaluating plugins for the WP ecosystem.

Progress Bar Review - In-Depth Analysis

Create a stylish CSS3 progress bar using a simple shortcode. Customize colors and styles easily.

Performance Overview

WPS Score

6.87/10

User Rating

5/5 (based on 24+ reviews)

Active Installations

1,000+

Update Frequency

Below Average It is calculated using the weighted average of same category plugins.

Security Score

5 / 10 (Medium Risk) It is calculated using the weighted average of all versions.

What It Does

This plugin does one thing: it creates a simple (but nice-looking) CSS3 progress bar that you can style with your own CSS and use wherever you want with a simple shortcode.

To add a progress bar to a post or a page, simply use this shortcode: [wppb progress=50], where '50' is a progress bar that is 50% complete. It is simple, lightweight, and cross-browser compatible.

For more examples and full descriptions of all the available options, click on the options tab. For demos of each of the options, go here: https://progressbar.jazzsequence.com.

Comparing to Alternatives

Progress Bar stands out in its category with no direct competitors matching its simplicity and effectiveness. However, there is one notable alternative worth considering.

Top alternatives

Progress Bar & Skill Bar ( WPS: 6.77)

Strengths

Highly rated with a perfect 5-star average from all users.
Simple and clean design that is easy to customize.
Mobile-ready and responsive for all devices.
Allows flexible progress bar fill levels.
No reported user complaints or issues.

Weaknesses

Has had medium severity security vulnerabilities in past versions, now fixed.
Lacks a pro version with advanced features.
Limited to basic progress bar functionality without extensive customization options.
No direct integration with other plugins or services.

User Sentiment Analysis

With a flawless 5-star rating from all 24 reviewers, user feedback is overwhelmingly positive, highlighting ease of use and design quality.

Positive highlights

"Really nice plugin!" — Arjen_M
"Thanks you." — Ümit Solmaz
"Wonderful plugin that is my wanted, thank you!" — SUMMER
"I really like the way this looks on my site." — authormelanieray
"Love this plugin, clean and simple, easy to customise and place wherever you like." — applestalk

Common complaints

Weaknesses

Past security vulnerabilities related to stored cross-site scripting.
No advanced features due to absence of a pro version.
Limited customization compared to some alternatives.

Who Should Use This?

Best for

Users seeking a straightforward, easy-to-use progress bar plugin with a clean design and reliable performance.

Not ideal for

Those needing advanced customization, integrations, or who prioritize plugins with no history of security vulnerabilities.

Pricing & Value

Free version includes

The free version offers a fully functional progress bar with customization options for fill levels and placement.

Final Verdict

Progress Bar is an excellent choice for users who want a simple, effective progress bar plugin with a perfect user rating and clean design. Its ease of use and mobile readiness make it a reliable option for many WordPress sites.

However, users should be aware of its past security issues, which have been addressed in recent updates, and the lack of a pro version limits advanced functionality. Those needing more features or enhanced security might consider alternatives.

Other Notable Features

Here are a few other notable features of this free Progress Bar plugin.

CSS3

Progress

Progress Bar

Shortcode

FAQ

WP Progress bar allows currencies in progress bars. By default, the supported currency symbol is $. However, since version 2.2, you can modify this in your environment by using the wppb.currency_symbol filter, e.g.:

add_filter( ‘wppb.currency_symbol’, ‘my_custom_currency_symbol’ );
function my_custom_currency_symbol( $symbol ) {
return ‘£’;
}
`

This code would allow-list the £ symbol for use in progress bars. You can also add support for multiple currency symbols in a similar way:

add_filter( ‘wppb.currency_symbol’, ‘my_custom_currency_symbol’ );
function my_custom_currency_symbol( $symbol ) {
$allowed_symbols = [ ‘$’, ‘£’ ];
if ( in_array( $symbol, $allowed_symbols ) ) {
return $symbol;
}

return '$';

}
`

Okay, here’s a great example that’s being used in the plugin CSS right now to create the ‘red’ option. Here’s the CSS:

/* red */ div.wppb-progress > span.red {     background: #d10418; /* Old browsers */     background: -moz-linear-gradient(top, #d10418 0%, #6d0019 100%); /* FF3.6+ */     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d10418), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */     background: -webkit-linear-gradient(top, #d10418 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */     background: -o-linear-gradient(top, #d10418 0%,#6d0019 100%); /* Opera 11.10+ */     background: -ms-linear-gradient(top, #d10418 0%,#6d0019 100%); /* IE10+ */     background: linear-gradient(top, #d10418 0%,#6d0019 100%); /* W3C */ }

You don’t need to worry about the candystripes — those will apply to your new option automatically. Using this example, you can change the hex values and create a new class (like span.green or span.orange or span.nyannyanrainbows) that you can use inside the shortcode. Want to see where I got those gradient values? Go here: http://www.colorzilla.com/gradient-editor/#d10418+0,6d0019+100;Custom

At the end of wppb.css you’ll find the two classes for the percentage parameter:

/* after */ div.wppb-wrapper.after { width: 440px; } div.wppb-wrapper.after div.wppb-progress { float: left; } div.wppb-wrapper.after div.after { float: right; line-height: 25px; }  /* inside */ div.wppb-wrapper.inside { width: 400px; height: 25px; position: relative; } div.wppb-wrapper div.inside { margin: 0 auto; line-height: 25px; color: #ffffff; font-weight: bold; position: absolute; z-index: 1; width: 400px; text-align: center; }

Position these however you want. If you wanted the percentage to be inside the progress bar but towards the end, you could do something like this:

/* right */ div.wppb-wrapper.right { width: 400px; height: 25px; position: relative; } div.wppb-wrapper div.inside { margin: 0 auto; line-height: 25px; color: #ffffff; font-weight: bold; position: absolute; z-index: 1; width: 400px; text-align: right; padding-right: 10px }