Progress Bar
A labelled bar that fills to a percentage when it scrolls into view.
The Progress Bar shows a percentage as a filled bar with a title, such as skill levels, project stages or a fundraising goal. The bar fills up when it scrolls into view, and it can show the percentage, a short text inside the bar and moving stripes.
Add a progress bar
Insert it
Open Insert in the left panel, find Progress Bar under Basic (or type
progressin Search widgets) and click it or drag it onto the canvas.Set the value
Type the Title and the Percentage (0–100). Add an Inner text if you want words inside the bar.
Style the bar
On the Design tab, set the Height, the Fill color or gradient and the Track color.
Settings
Settings marked Per device can differ on desktop, tablet and mobile (see Responsive editing). The Title supports dynamic tags (see Dynamic tags).
Content tab
Progress bar
| Setting | What it does |
|---|---|
| Title | The label above the bar. Supports dynamic tags. |
| Title HTML tag | The HTML tag of the title. It sets the heading level for search engines and screen readers, not the size. Default: SPAN. |
| Percentage | How full the bar is, from 0 to 100. Default: 75. |
| Inner text | Text inside the filled part of the bar, such as “Advanced”. |
| Show percentage | Shows the percentage number. On by default. |
| Percentage position | Puts the percentage next to the title or inside the bar. Options: Next to title, Inside bar. Default: Next to title. Shown when Show percentage is on. |
| Animate on scroll | Fills the bar when it scrolls into view. Visitors who prefer reduced motion see the full bar straight away. On by default. |
| Duration (ms) | How long the fill takes, in milliseconds. Shown when Animate on scroll is on. |
| Striped | Adds diagonal stripes to the filled part. |
| Move stripes | Moves the stripes. Shown when Striped is on. |
Design tab
Bar
| Setting | What it does |
|---|---|
| Height | Height of the bar. Per device. |
| Border radius | Rounds the ends of the bar. Per device. |
| Fill | Color or gradient of the filled part. |
| Track color | Color of the empty part. |
| Track border | Border of the bar. |
| Track shadow | Shadow of the bar. |
| Inner text & percentage › Typography | Text style or font, size, weight and spacing of the inner text and percentage. |
| Inner text & percentage › Color | Color of the inner text and percentage. |
| Inner text & percentage › Horizontal padding | Space at the start and end of the inner text. Per device. |
Title & percentage
| Setting | What it does |
|---|---|
| Title typography | Text style or font, size, weight and spacing of the title. |
| Title color | Color of the title. |
| Percentage typography | Text style or font, size, weight and spacing of the percentage. |
| Percentage color | Color of the percentage. |
| Spacing | Space between the title and the bar. Per device. |
Shared Design sections
Every element also has these sections at the end of the Design tab.
| Section | What it does |
|---|---|
| Spacing & position | Margin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position. |
| Background & border | Background, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows. |
| Mask | Crops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks. |
Behaviour tab
Behaviour sections
The Behaviour tab is the same for every element.
| Section | What it does |
|---|---|
| Anchor & classes | An Anchor ID for #links and your own CSS classes. |
| Animations | Entrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects. |
| Motion & effects | A simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning. |
| Scroll & mouse effects | Movement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt). |
| Visibility | Hide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility. |
| Conditions | Show the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions. |
| Interactions | Show, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions. |
| Attributes | Custom HTML attributes for this element. See Anchor, classes & attributes. |
Tips
- Readable labels. Screen readers read the title and the value, so keep titles short and meaningful (“Build”, not “Bar 3”).
- Contrast inside the bar. Inner text sits on the fill color; pick an Inner text & percentage → Color that stays readable on it.
- Reduced motion. Visitors who prefer reduced motion, and the editor, show the full bar without the fill animation.
- Several bars. Stack bars in a container with a Gap of about 20 px.