Content · Gutenberg
Progress Bar block for WordPress
Display animated progress bars with customizable styles and labels.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Display animated progress bars with customizable styles and labels.
Inspector panels on this block: Layout, Labels & Percentage, Effects, Title, Progress Items. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout — Style” options: Default, Rounded, Flat, Thin, Thick; “Percentage Position” options: Right of Label, Inside Bar, Above Bar, Hidden.
Where to find it
Gutenberg inserter → Content → search “Progress Bar” (block name `blockenberg/progress-bar` in block.json). Style it in the sidebar after insert.
How to use Progress Bar block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Progress Bar”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Layout. Set “Layout — Style”, “Bar Height”, “Bar Spacing”, “Border Radius”.
- Check the published page. The view script reads HTML data attributes: data-animate, data-color, data-glow, data-gradient, data-gradient-angle, data-items, data-percentage, data-percentage-position. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Layout — Style | Select control; the chosen value is saved on the block. Options: Default; Rounded; Flat; Thin; Thick. block.json default: default. Saved as `layoutStyle`. |
| Bar Height | Numeric range control in the inspector. Range 4–60. block.json default: 20. Saved as `barHeight`. |
| Bar Spacing | Numeric range control in the inspector. Range 8–60. block.json default: 24. Saved as `barSpacing`. |
| Border Radius | Numeric range control in the inspector. Range 0–30. block.json default: 10. Saved as `barRadius`. |
| Show Labels | On/off toggle in the inspector. On by default. Saved as `showLabels`. |
| Show Percentage | On/off toggle in the inspector. On by default. Saved as `showPercentage`. |
| Percentage Position | Select control; the chosen value is saved on the block. Options: Right of Label; Inside Bar; Above Bar; Hidden. block.json default: right. Saved as `percentagePosition`. |
| Animate on Scroll | On/off toggle in the inspector. On by default. Saved as `animateOnScroll`. |
| Animation Duration (ms) | Numeric range control in the inspector. Range 200–3000. block.json default: 1000. Saved as `animationDuration`. |
| Stripes | On/off toggle in the inspector. Off by default. Saved as `stripes`. |
| Animated Stripes | On/off toggle in the inspector. Off by default. Saved as `stripesAnimated`. |
| Glow Effect | On/off toggle in the inspector. Off by default. Saved as `glowEffect`. |
| Gradient | On/off toggle in the inspector. Off by default. Saved as `gradient`. |
| Gradient Angle | Numeric range control in the inspector. Range 0–360. block.json default: 90. Saved as `gradientAngle`. |
| Show Title | On/off toggle in the inspector. Off by default. Saved as `showTitle`. |
| Label | Text field in the inspector. |
| Percentage | Numeric range control in the inspector. Range 0–100. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Label (Label Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `labelTypo`. |
| Percentage (Pct Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `pctTypo`. |
| Track Color | Color control in the inspector. block.json default: #e5e7eb. Saved as `trackColor`. |
| Label Color | Color control in the inspector. block.json default: #1f2937. Saved as `labelColor`. |
| Percentage Color | Color control in the inspector. block.json default: #6b7280. Saved as `percentageColor`. |
| Title Color | Color control in the inspector. block.json default: #1f2937. Saved as `titleColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-animate, data-color, data-glow, data-gradient, data-gradient-angle, data-items, data-percentage, data-percentage-position.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Display animated progress bars with customizable styles and labels — that is the job of Progress Bar, not a generic content block.
- Use it when you need the editor control labeled “Layout — Style”, which exists on this block’s inspector.
- It matches pages about progress, bar, skill.
- Inserter grouping: articles, cards, lists, and long-form layouts.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Progress Bar block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Progress Bar”. It sits under Content. After insert, open Layout and set “Layout — Style”, “Bar Height”, “Bar Spacing”, “Border Radius”.
What makes Progress Bar different from other Blockenberg blocks?
Display animated progress bars with customizable styles and labels. Inspector labels on this block include “Layout — Style”, “Bar Height”, “Bar Spacing”, “Border Radius”.
Is the Progress Bar Gutenberg block free?
Yes. Progress Bar ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Progress Bar to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Layout, Labels & Percentage, Effects, Title).
Related content blocks
Progress Circle
Animated SVG circular progress rings — perfect for skills, stats, and KPIs.
Step Progress
Horizontal wizard progress bar showing current step out of N with labels and colors.
Icon Stats
Statistics displayed with large decorative icons, bold numbers, and descriptive labels.
Interactive Checklist
A fully interactive checklist with progress tracking, emoji icons, add/remove items, and optional persistence via localStorage. Rich color and layout controls.
Search Bar
Styled search field and button for site search with live AJAX suggestions option.
Accordion
Collapsible accordion panels for FAQ, features, and more.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Progress Bar from the Gutenberg inserter.