WBD Progress Bar

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.

Features

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
* 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:

• Skill & competency display
• Project completion indicators
• Goal tracking & fundraising
• Statistics & data visualization
• Survey results & polls
• Resume / portfolio pages

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.

Why Use WBD Progress Bar?

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.

Read the full description on the official page →