by Chris Reynolds 5 (24 reviews)

Progress Bar

Name: Progress Bar
Rating: 5.0 (24 reviews)
Author: Chris Reynolds

A simple progress bar shortcode that can be styled with CSS

Progress Bar ranks #5,855 among WordPress.org plugins with 1,000+ active installations, is #796 of 8,538 in the Customization category, a 5/5 rating from 24 reviews, and was last updated Sep 13, 2026. Data from WordPress.org, refreshed twice daily — see methodology.

Compatible with WP 7.1

v2.2.5 Current Version v2.2.5

Updated 2 days ago Last Update on 13 Sep, 2026

Refreshed 13 hours ago Last Refreshed on

#796 of 8,538 in Customization Top 10% by installs Downloads +306.5% this week Actively maintained

View on WordPress.org

Rank

#5,855

— No change

Active Installs

1K+

-39.4%

KW Avg Position

56.8

— No change

Downloads

68.2K

+53 today

Support Resolved

— No change

Rating

100%

Review 5 out of 5

5 (24 reviews)

Next Milestone 2K

Total Progress 17.6%

1K+ 2K+

5,806

Ranks to Climb

Growth Needed

8,000,000

Active Installs

Pro

Unlock Exact Install Count

See the precise estimated active installs for this plugin, calculated from real-time ranking data.

Exact install estimates within tiers
Track install growth over time
Milestone progress predictions

Upgrade to Pro

Need 824 more installs to reach 2K+

Rank Changes

Current #5,855

Change

Best #

Upgrade to Pro

Unlock 30-day and 90-day rank history charts with a Pro subscription.

Upgrade Now

Active Installs Growth

Upgrade to Pro

Active Installs 0,000,000+

Growth +0.0%

Peak 0,000,000

Downloads Growth

Downloads

Growth

Peak

Upgrade to Pro

Unlock 30-day, 90-day, and yearly download history charts with a Pro subscription.

Upgrade Now

Reviews & Ratings

5.0

24 reviews

Overall 100%

24 (100%)

0 (0%)

Security History

Source: WPVulnerability

2 known vulnerabilities on record · 1 in the last 24 months · checked 1 month ago

May 7, 2025

Progress Bar [progress-bar] < 2.2.4

CVE-2025-47441 · Fixed in v2.2.4
Apr 24, 2023

Progress Bar [progress-bar] < 2.2.0

CVE-2023-23699 · Fixed in v2.2.0

Track This Plugin

Get detailed analytics, keyword tracking, and position alerts delivered to your inbox.

Start Tracking Free

Plugin Details

Version: 2.2.5
Last Updated: Sep 13, 2026
Requires WP: 3.4+
Tested Up To: 7.1
PHP Version: 7.0 or higher
Author: Chris Reynolds

Support & Rating

Rating: ★ ★ ★ ★ ★ 5
Reviews: 24
Support Threads: 0
Resolved: 0%

Keywords

CSS3 progress progress bar shortcode

Upgrade to Pro

Unlock keyword rankings, search positions, and detailed analytics with a Pro subscription.

Upgrade Now

Similar Plugins

Adminify – White Label, Admin Menu Editor, Login Customizer

6K+ installs

#2,752

Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits

30K+ installs

#1,007

Elementor Website Builder - more than just a page builder

10M+ installs

LiteSpeed Cache

7M+ installs

Ultimate Addons for Elementor – Widgets, Templates, WooCommerce & Header Footer Builder

2M+ installs

#26

Essential Addons for Elementor - Popular Elementor Templates & Widgets

1M+ installs

#29

Starter Templates: AI-Powered Website Templates for Elementor & Gutenberg

One Click Demo Import

1M+ installs

#61

Translate Wordpress with GTranslate

900K+ installs

#71

View all Customization plugins

TL;DR

AI summary of the plugin's readme

This plugin is for WordPress site owners who want to add a visual progress indicator to posts or pages. It solves the problem of displaying progress, funding, or completion status via a simple shortcode without needing to build custom CSS3 progress bar markup from scratch.

Simple shortcode usage
Custom colors and gradients
Percentage or fraction progress
Dollar-value fundraising bars
Candystripe and animated options
Inside or after text placement
Custom arbitrary text display
Fullwidth responsive option

Frequently Asked Questions

Common questions about Progress Bar

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 '$'; } `

You can change the colors via the css. Use div.wppb-progress to change the style of the container and div.wppb-progress > span to change the style of the bar itself. You can also change the candystripe and animated candystripe. See http://css-tricks.com/css3-progress-bars/ for an excellent tutorial and http://www.colorzilla.com/gradient-editor/ for a CSS gradient generator. No, really, how do I change the colors? I don't know much about CSS. 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 }