by Chris Reynolds
5 (24 reviews)
Progress Bar
A simple progress bar shortcode that can be styled with CSS
Tested up to WP 6.7 (Current: 6.9)
v2.2.4
Current Version v2.2.4
Updated 8 months ago
Last Update on 05 May, 2025
Synced 11 hours ago
Last Synced on
Rank
#5,771
-4 this week
Active Installs
1K+
—
No change
KW Avg Position
N/A
—
No change
Downloads
67.3K
+3 today
Support Resolved
0%
—
No change
Rating
100%
Review 5 out of 5
5
(24 reviews)
Next Milestone 2K
1K+
2K+
384
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
Need 198 more installs to reach 2K+
Rank Changes
Current
#5,771
Change
Best
#
Downloads Growth
Downloads
Growth
Peak
Upgrade to Pro
Unlock 30-day, 90-day, and yearly download history charts with a Pro subscription.
Upgrade NowReviews & Ratings
5.0
24 reviews
Overall
100%
5
24
(100%)
4
0
(0%)
3
0
(0%)
2
0
(0%)
1
0
(0%)
Tracked Keywords
Showing 0 of 0| Keyword | Position | Change | Type | Updated |
|---|---|---|---|---|
| No keyword data available yet. | ||||
Unlock Keyword Analytics
Track keyword rankings, search positions, and discover new ranking opportunities with a Pro subscription.
- Full keyword position tracking
- Historical ranking data
- Competitor keyword analysis
Track This Plugin
Get detailed analytics, keyword tracking, and position alerts delivered to your inbox.
Start Tracking FreePlugin Details
- Version
- 2.2.4
- Last Updated
- May 05, 2025
- Requires WP
- 2.8+
- Tested Up To
- 6.7
- PHP Version
- N/A
- Author
- Chris Reynolds
Support & Rating
- Rating
- ★ ★ ★ ★ ★ 5
- Reviews
- 24
- Support Threads
- 0
- Resolved
- 0%
Keywords
Upgrade to Pro
Unlock keyword rankings, search positions, and detailed analytics with a Pro subscription.
Upgrade NowSimilar Plugins
WP Adminify – White Label WordPress, Admin Menu Editor, Login Customizer
7K+ installs
#2,738
Master Addons For Elementor - White Label, Free Widgets, Hover Effects, Conditions, & Animations
40K+ installs
#930
Qi Addons For Elementor
200K+ installs
#253
MW
MW WP Form
200K+ installs
#262
WPFront Scroll Top
200K+ installs
#270
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 }