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]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
progress_bar_title |
— | String unless stated otherwise | Add the title for the progress bar. |
progress_bar_title_position |
— | left, right |
Select the position for the title. |
progress_bar_title_color |
— | String unless stated otherwise | Choose title color. |
progress_bar_progress_percent |
50 |
Number | Choose the percentage of progress. |
progress_bar_color |
— | String unless stated otherwise | Choose bar color. |
progress_bar_progress_color |
— | String unless stated otherwise | Choose progress bar color. |
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 |
Check the box if you want the progress animation to run. |
progress_bar_static_number |
— | yes |
Check the box if you want the progress animation to run. |
device_visibility |
— | String unless stated otherwise | Applies the selected responsive visibility rule. |
el_id |
— | Valid unique HTML ID | Enter section ID (Note: make sure it is unique and valid according to w3c specification). |
el_class |
— | String unless stated otherwise | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
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. The web_progress_bars script, animation, calculated percentage label and fill width, static-number mode, shortcode attributes, and conditional loading remain unchanged. Revert to theme CSS removes the replacement and restores the current theme asset.
Verification
Verify web_progress_bar with representative content, its empty state and every enabled responsive range. Pay particular attention to progress_bar_title and progress_bar_title_position.