Dracula

Progress Bar Block

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.

Progress Bar Block vs WBD Progress Bar