web_progress_bar Shortcode
The web_progress_bar shortcode renders the progress bar component.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Usage
[web_progress_bar progress_bar_title="Completion" progress_bar_progress_percent="75" progress_bar_color="12" progress_bar_progress_color="1"]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
progress_bar_title |
— | Text with safe inline HTML | Add a descriptive visible title and accessible name. |
progress_bar_title_position |
— | left, right |
Select the position for the title. |
progress_bar_title_color |
— | Palette slot 1–15 |
Title color; empty inherits the surrounding text color. |
progress_bar_progress_percent |
50 |
Number, rounded and bounded to 0–100 |
Filled percentage; invalid input uses 50. |
progress_bar_color |
— | Palette slot 1–15 |
Full track color; empty is transparent. |
progress_bar_progress_color |
— | Palette slot 1–15 |
Filled portion color; empty is transparent. |
progress_bar_style |
default |
web-progress-xs, web-progress-sm, default, web-progress-md, web-progress-lg, web-progress-xlg |
Select the style. |
progress_bar_animation |
yes |
yes enables; empty or no disables |
Animate once when visible, respecting reduced motion. |
progress_bar_static_number |
— | yes enables |
Put the number beside the full track rather than beneath the filled portion; this does not disable animation. |
device_visibility |
— | Space-separated web-hide-on-xs, web-hide-on-sm, web-hide-on-md, web-hide-on-lg |
Hide independently in selected responsive ranges. |
el_id |
Generated | Valid unique HTML ID | Identify this bar for links and accessible title association. |
el_class |
— | Space-separated CSS classes | Apply existing theme helpers. |
Customize the stylesheet
Go to Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Progress bars to compare the current progress-bars.min.css source with an editable version. Saving creates a minified per-site replacement for the existing web-progress-bars handle. Revert to theme CSS removes the replacement and restores the current theme asset. This component style is also used by the Gutenberg Progress Bar preview.
The component stylesheet is conditional on content. The web_progress_bars script is requested only when animation is enabled, including bars loaded through the theme AJAX lifecycle. Without JavaScript the final label and fill remain visible. The shortcode remains available with Page Builder administration disabled.
Verification
Check the title, percentage, palette contrast and each enabled screen range. A transparent fill or a 0% value intentionally displays no filled segment. Reduced motion skips the animation; scrolling away and back does not replay it.
For native editing, see Progress Bar in Gutenberg.