Marketing module

Progress Bar block

A labelled progress or skill bar that fills when scrolled into view.

Overview

The Progress Bar shows a percentage as a horizontal bar with a label — skills (“Design 90%”), fundraising goals or project progress. The bar animates from empty to its value when it scrolls into view.

At a glance

Block name: wpbb/progress-bar
Module: Marketing
Find it by searching: Progress Bar
Loads JavaScript on the site: Yes, a small script, only on pages that use this block

When and why to use it

Skill levels on a portfolio.
Goals and campaign progress.

Example scenarios

Portfolio: four bars — Design 90, Development 80, Strategy 70, Writing 60 — size S, striped off.

See it in action

These are live examples: real Progress Bar blocks rendered by WordPress with the plugin’s own styles and scripts. Use the buttons to see how they adapt to tablet and phone screens.

Colours, sizes and positions

Open in a new tab

How to add the Progress Bar block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Progress Bar in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Progress Bar in the results. The block appears with a bar at 75%.
Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

Label

What it does: What the bar measures.
What to enter or choose: A short name (plain text).
Default: Empty
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: Always — it also names the bar for screen readers.
Example: “Web design”.
Result: Shown above the bar. Placeholder: “Skill or goal”.

Settings panel: Progress

Value (%)

What it does: How full the bar is.
What to enter or choose: A number from 0 to 100 (%).
Default: 75 %
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Always.
Example: 75.
Result: The bar fills to this percentage.

Show percentage

What it does: Shows the number (e.g. “75%”).
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Usually on.
Example: Off for purely visual bars.
Result: The percentage appears or hides.

Percentage positionShown when Show percentage is on

What it does: Where the percentage is shown.
What to enter or choose: One of: Beside label, Inside bar.
Default: Beside label
How to use it: Click one of the buttons in the group.
When to use it: Inside needs a thicker bar.
Example: Inside bar with size L.
Result: The number moves.

Fill when scrolled into view

What it does: Animates the bar from empty.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Off for print-like pages.
Example: On.
Result: The bar fills when visible; reduced-motion visitors see it full immediately.

Color

What it does: The bar colour.
What to enter or choose: One of: Brand, Dark, Mint.
Default: Brand
How to use it: Click one of the buttons in the group.
When to use it: Always optional.
Example: Mint for a “success” feel.
Result: Bar colour changes.

Thickness

What it does: The bar height.
What to enter or choose: One of: S, M, L.
Default: M
How to use it: Click one of the buttons in the group.
When to use it: L to show the percentage inside.
Example: L.
Result: Thicker or thinner bar.

Striped

What it does: Adds diagonal stripes.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Optional.
Example: On for a playful look.
Result: Stripes on the bar.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Progress Bar offers.

Element: Bar selected first

The filled part.

Styles-tab controls for “Bar”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal

States: Normal only.

Element: Block

The wrapper.

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Spacing	Margin	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Effects	State transition (ms)	—	Normal
Effects	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Track

The empty background track (and its height).

Styles-tab controls for “Track”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States: Normal only.

Element: Label

The label.

Styles-tab controls for “Label”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Percentage

The percentage.

Styles-tab controls for “Percentage”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Radius, Margin, Width, Max width, Height, Min width / Min height / Max height, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Font size, Line height, Letter spacing, Alignment.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.

How it works on your site

A role="progressbar" element with the value; a small script starts the fill when it is visible.

Accessibility

Screen readers announce the label and the value (e.g. “Web design, 75%”).
Without a label, the bar is announced as “Progress”.