Freemius

wpbranddigital

The Progress Bar block is a simple yet powerful tool for displaying progress, statistics, skills, or any percentage-based data on your WordPress site. Built with modern web standards, this block offers smooth animations and a clean, professional appearance.
Whether you need a simple skill bar, an animated number counter, a circular radial ring, or a full skills section — WBD Progress Bar has you covered.
<h3>Features</h3>
Display Modes 
* Single Bar – Classic horizontal progress bar with full customization 
* Number Counter – Animated count-up effect with prefix, suffix, and optional bar below 
* Circular / Radial Progress Bar – Beautiful SVG ring-style progress with 10 themes, custom size, stroke width, center text, and optional label 
* Group / Skills Section – Display multiple progress bars together as a skills list with individual labels, colors, and percentages; flexible label & percentage positioning
10 One-Click Template Styles 
Ocean Blue, Sunset Fire, Forest Green, Purple Galaxy, Golden Hour, Midnight Dark, Rose Pink, Arctic Ice, Corporate Gray, Lemon Lime
Customization 
* Progress percentage control (0–100) 
* Custom fill & track colors 
* Gradient fill (two-color gradient) 
* Bar corner radius control (square to pill) 
* Bar height control (6px–40px) 
* Optional percentage text display 
* Percentage position — Inside bar / Outside right / Above bar 
* Label position — Above / Below / Inline row 
* Inline gap control (when label is inline) 
* Milestone marker with custom label 
* Hover tooltip on progress bar 
* Scroll-triggered animation (IntersectionObserver) 
* Animation type — Ease, Ease In, Ease Out, Ease In Out, Linear, Bounce, Elastic 
* Animation duration control 
* Typography control — Font family & font size for label and percentage text 
* Fully responsive design 
* Accessible design with semantic HTML
Perfect For:
<ul>
<li>Skill & competency display </li>
<li>Project completion indicators </li>
<li>Goal tracking & fundraising </li>
<li>Statistics & data visualization </li>
<li>Survey results & polls </li>
<li>Resume / portfolio pages</li>
</ul>
The block provides an intuitive editing experience with sidebar controls for adjusting the percentage (0–100), customizing colors, toggling percentage text visibility, and selecting from predefined style variations.
<h3>Why Use WBD Progress Bar?</h3>
Most progress bar plugins are either too bloated with unnecessary features or too simple to be actually useful. WBD Progress Bar is built differently:
🚀 Performance First 
The block outputs pure static HTML and CSS — no jQuery, no heavy JavaScript libraries. The frontend script only loads when your block is actually on the page, keeping your site fast.
🎨 Visual Flexibility 
Four display modes, five style variations, ten one-click templates, gradient fill, custom radius, custom height, and full color control — all without touching a single line of code.
🧩 Built for Gutenberg 
This is a native WordPress block, not a shortcode or widget. It works seamlessly inside the block editor, Full Site Editor (FSE), reusable blocks, and block patterns.
📱 Responsive by Default 
Every mode — single bar, counter, circular, group — adapts automatically to mobile, tablet, and desktop screens without extra configuration.
⚡ Scroll Animation Without a Plugin 
Built-in IntersectionObserver-based scroll trigger animates your bars when they come into view. No extra animation plugin needed.
<h3>Source Code & Build Instructions</h3>
<ul>
<li>Source Code Repository: https://github.com/wpbranddigital/wbd-progress-bar</li>
</ul>
This plugin is built using <code>@wordpress/scripts</code> (webpack). The compiled/minified files in the <code>build/</code> directory are generated from the human-readable source files located in the <code>src/</code> directory of the plugin.
Source files included in this plugin:
<ul>
<li><code>src/index.js</code> — Block registration entry point</li>
<li><code>src/edit.js</code> — Editor component (block inspector controls and editor preview)</li>
<li><code>src/save.js</code> — Save component (frontend HTML output)</li>
<li><code>src/view.js</code> — Frontend JavaScript (scroll animations, counter animations)</li>
<li><code>src/block.json</code> — Block metadata and attribute definitions</li>
<li><code>src/editor.scss</code> — Editor-only styles</li>
<li><code>src/style.scss</code> — Frontend styles</li>
</ul>
To build from source:
<ol>
<li>Make sure you have Node.js (v18+) and npm installed.</li>
<li>Navigate to the plugin directory.</li>
<li>Run <code>npm install</code> to install dependencies.</li>
<li>Run <code>npm run build</code> to generate the production <code>build/</code> directory.</li>
<li>Run <code>npm start</code> to start the development watcher with live rebuild.</li>
</ol>
The only build dependency is <code>@wordpress/scripts</code> (see <code>package.json</code>).
<h3>How To Use</h3>
Step 1 — Add the Block
Open any post, page, or template in the WordPress editor. Click the + block inserter button, search for “Progress Bar”, and click to insert the WBD Progress Bar block.
Step 2 — Choose a Display Mode
In the right sidebar, find the Block Mode panel at the top. Select one of four modes:
<ul>
<li>Single Bar — A classic horizontal progress bar. Best for individual skills, project completion, or goal tracking.</li>
<li>Number Counter — An animated number that counts up on scroll. Great for statistics pages (“500+ clients”, “$1M+ revenue”).</li>
<li>Circular / Radial — A circular SVG ring progress indicator. Perfect for dashboards or visual KPI displays.</li>
<li>Group / Skills Section — Multiple bars stacked together. Ideal for resume skills sections or comparison lists.</li>
</ul>
Step 3 — Apply a Template (Optional)
Open the Template Styles panel and click any of the 10 preset templates to instantly apply a complete color scheme and style. You can fine-tune colors individually after applying a template.
Step 4 — Customize Settings
Depending on your selected mode, configure the following panels:
<ul>
<li>Progress Settings — Set percentage, height, radius, label text, label position, and percentage position.</li>
<li>Animation — Choose animation type (ease, bounce, elastic), set duration, and enable scroll-triggered animation.</li>
<li>Milestone & Tooltip — Add a milestone marker at any percentage point with a custom label. Enable hover tooltip for additional info.</li>
<li>Typography — Set font family and font size for the label and percentage text independently.</li>
<li>Color Settings — Set fill color, track color, label color, and percentage text color. Enable gradient fill to use two colors.</li>
</ul>
Step 5 — Using the Number Counter
Switch to Number Counter mode. Set:
<ul>
<li>Target Number — The final value to count up to (e.g. 1500).</li>
<li>Prefix — Text before the number (e.g. <code>$</code>).</li>
<li>Suffix — Text after the number (e.g. <code>+</code> or <code>%</code>).</li>
<li>Label — A description shown below the number (e.g. “Happy Clients”).</li>
<li>Show Progress Bar Below — Toggle to add a bar underneath the counter.</li>
</ul>
The counter animates automatically on page load, or enable Animate on Scroll so it only starts when the user scrolls to it.
Step 6 — Using Group / Skills Section
Switch to Group / Skills Section mode. In the sidebar:
<ol>
<li>Each bar item has its own Label, Percentage, and Bar Color.</li>
<li>Click + Add Bar to add more items (no limit).</li>
<li>Click ✕ to remove any item.</li>
<li>Set Label Position — Above bar (with optional percentage on the same line) or Inline row.</li>
<li>Set Percentage Position — Inside bar / Outside right / Same line as label.</li>
<li>Adjust Gap Between Bars and Inline Gap sliders to control spacing.</li>
</ol>
Step 7 — Using Circular / Radial Mode
Switch to Circular / Radial mode. In the sidebar:
<ol>
<li>Choose one of the 10 circular themes by clicking the theme thumbnail.</li>
<li>Adjust Size (80–300px) and Stroke Width (3–20px).</li>
<li>Set the Progress Percentage.</li>
<li>Toggle Show Label Below to display a text label under the ring.</li>
<li>Fine-tune Stroke Color, Track Color, and Center Text Color individually.</li>
</ol>
Step 8 — Publish
Click Publish or Update. The block renders as clean, static HTML on the frontend with no extra requests or render-blocking scripts.
<h4>Where can I get support?</h4>
Visit our <a href="https://www.wpbranddigital.org/contact/" rel="nofollow ugc">contact page</a> for support.

WBD Progress Bar

A beautiful and lightweight progress bar block for the WordPress Gutenberg editor with smooth animations and full customization options.

M Asif Rahman

Rupok

WPDeveloper

Rahat Hossain

Md Monir Hossain

Using this Progress bar block, you can easily make your website interactive & grab the attention of your audience. You can use this in WordPress block editor and showcase your important statistics, data, achievements with beautiful bars.
Completely Customizable: You can customize the content, colors, etc to make it just the way you need
Super Light-weight: No extra resources used and it’s highly optimized for super fast loading & instant Live editing
Dedicated Support: We’ve an extraordinary support team ready to help you. Ask your questions in the support forum, we’ll get back to you immediately
<h3>🚀 BACKED BY A TRUSTED TEAM</h3>
This Block is brought to you by <a href="https://wpdeveloper.com" rel="nofollow ugc">WPDeveloper</a>, the team behind the most popular elements library <a href="https://wordpress.org/plugins/essential-addons-for-elementor-lite/" rel="ugc">Essential Addons for Elementor</a> (used by almost 1 million+ happy users from 180+ countries).
<h3>👨‍💻 DOCUMENTATION AND SUPPORT</h3>
<ul>
<li>For documentation and tutorials go to our <a href="https://essential-blocks.com/docs/" rel="nofollow ugc">documentation</a></li>
<li>To report issue and contribution visit <a href="https://github.com/EssentialBlocks/progress-bars" rel="nofollow ugc">Github</a>.</li>
<li>If you have any more questions, visit our support on the <a href="https://wordpress.org/support/plugin/progress-bars" rel="ugc">Plugin’s Forum</a>.</li>
<li>For more information about features, FAQs and documentation, check out our website at <a href="https://wpdeveloper.com/" rel="nofollow ugc">WPDeveloper</a>.</li>
</ul>
<h3>🙌 JOIN THE COMMUNITY</h3>
🎦 Subscribe to our <a href="https://www.youtube.com/wpdevelopernet/?sub_confirmation=1" rel="nofollow ugc">Youtube Channel</a> to watch video tutorials on WordPress.
🤝 Join our <a href="https://www.facebook.com/groups/wpdeveloper.net/" rel="nofollow ugc">Facebook Community</a> & get connected with expert web creators like yourself.
🧡 LOVED Progress Bar Block? Rate us on <a href="https://wordpress.org/support/plugin/progress-bars/reviews/#new-post" rel="ugc">WordPress Repository</a>
🔥 GET FREEBIES FOR YOUR WORDPRESS SITE
Consider checking out our other WordPress solutions & boost your WordPress website:
🔝 <a href="https://wordpress.org/plugins/essential-addons-for-elementor-lite/" rel="ugc">Essential Addons For Elementor</a>: Most popular Elementor addons with 70+ widgets & ready blocks
☁ <a href="https://wordpress.org/plugins/templately/" rel="ugc">Templately</a>: Free templates library for Elementor & Gutenberg along with the cloud collaboration for WordPress
🔔 <a href="https://wordpress.org/plugins/notificationx/" rel="ugc">NotificationX</a>: Best Social Proof & FOMO Marketing Solution to increase conversion rates
📚 <a href="https://wordpress.org/plugins/betterdocs/" rel="ugc">BetterDocs</a>: Best Documentation & Knowledge Base Plugin for WordPress reduce manual support tickets & improve user experience.
⏰ <a href="https://wordpress.org/plugins/wp-scheduled-posts/" rel="ugc">WP Scheduled Posts</a>: Advanced editorial calendar & complete solution for WordPress Post Scheduling, social sharing, missed scheduled alerts and more.
⭐ <a href="https://wordpress.org/plugins/reviewx/" rel="ugc">ReviewX</a>: WooCommerce Product review plugin that allows users to submit product reviews with multiple criteria, photos, video and more
⚡ <a href="https://wordpress.org/plugins/flexia" rel="ugc">Flexia</a>: Most lightweight, customizable & multi purpose theme for WordPress
Visit <a href="https://wpdeveloper.com/" rel="nofollow ugc">WPDeveloper</a> to learn more about how to do better in WordPress with <a href="https://wpdeveloper.com/blog" rel="nofollow ugc">Help Tutorial, Tips & Tricks</a>.
<h3>1.2.1 – 10/03/2022</h3>
<ul>
<li>Fixed: Error on style tab in the controls panel</li>
<li>Fixed: Minor bug of undefined variable</li>
</ul>
<h4>1.2.0 – 09/02/2022</h4>
<ul>
<li>Fixed: Block Base theme support</li>
<li>Improved: Font Library Updated</li>
<li>Improved: Controls and structure</li>
</ul>
<h4>1.1.1 – 23/08/2021</h4>
<ul>
<li>Improved: Security for asset generation</li>
<li>Fixed: Warning in controls</li>
</ul>
<h4>1.1.0 – 27-07-2021</h4>
<ul>
<li>Added: 7 New Layouts(Line, Line Rainbow, Circle, Circle Fill, Half Circle, Half Circle Fill, Box)</li>
<li>Added: Responsive Controls</li>
<li>Added: Margin Option in Wrapper</li>
<li>Added: Progress Bar Alignment</li>
<li>Added: Advanced and Responsive Typography Option</li>
<li>Added: Scroll Animation On Frontend View</li>
<li>Added: Stripe Animation</li>
<li>Improved: Inspector Panel Design</li>
<li>Improved: Inspector Panel Controllers</li>
</ul>
<h4>1.0.1 – 23-08-2020</h4>
<ul>
<li>Few minor bugfixes</li>
</ul>
<h4>1.0.0 – 29-07-2020</h4>
<ul>
<li>Initial release</li>
</ul>

Progress Bars

Make your website interactive with stunning progress bar block.

WBD Progress Bar vs Progress Bars