Progress Bars

The Progress Bars element turns a set of values into labelled bars — skills, project completion, funding raised, capacity used. Each bar is one item with a label and a number, either a percentage or a value against its own maximum.

Adding the element

Add an element in the YOOtheme Pro builder and pick Progress Bars from the Planckie Elements group. The builder starts you with three bars so the layout and the animation are visible immediately.

Bars are laid out in a grid, so one column is a stack of full-width bars and several columns put them side by side.

Content

Option	Description
Title	An optional headline above the bars, for example My Skills. Empty hides it — the placeholder in the field is a hint, not a default.
Items	The bars.
Display	Three switches — Show the label, Show the value and Show the range maximum — which hide those parts across every bar without deleting anything. The range maximum is unavailable while the text sits inside the bar.

Progress bar items

Option	Description
Label	The text next to the bar.
Value Mode	Percentage (0-100) fills the bar directly. Range (current/max) fills it with the value relative to its own maximum, for 8 of 10 or €4,000 of €10,000.
Value	The number. Values above the maximum are clamped to it, and negative values to zero.
Range Max	The maximum for range mode. 10 by default, and a maximum of zero falls back to 100.
Bar Color / Value Color	Override the colors of the whole element for this bar alone. Inherit follows the element.

A bar renders when it has a label or a value above zero, so a bar with neither is dropped rather than drawn empty.

Settings

Title

Option	Description
Style	A heading or text style of the active theme style, from Heading 3X-Large down to Text Small.
Outline text	Draws the title as an outline instead of filled type.
Decoration	A divider, a bullet or a line vertically centered to the heading.
Font Family	Default, Primary, Secondary or Tertiary, where the style has more than one.
Color	Muted, Emphasis, Primary, Secondary, Success, Warning, Danger or Background.
Title Element	h1 to h6, or div. h3 by default.

The group is only active while the Title field has text.

Bars

Option	Description
Style	Solid, Gradient, which fades the fill towards white, Striped, or Striped Animated.
Height	Small, Default or Large — 4, 8 or 16 pixels, and 26, 32 or 40 with the text inside the bar.
Radius	None, Rounded or Pill. Rounded by default.
Text Position	Above Bar, Below Bar or Inside Bar. Above and below place the label on the left, the range maximum on the right and the value in a badge that follows the fill; inside puts the label and the value in the fill itself and drops the range maximum.

Colors

Option	Description
Bar Color	The fill color of every bar: Primary, Secondary, Success, Warning, Danger — taken from the active theme style — or Custom. Primary by default.
Value Color	The background of the value badge. Bar Color, the default, follows the fill.
Custom Bar Color / Custom Value Color	Colour pickers, shown once the matching setting is Custom.

Theme colors follow the active style, so a bar set to Primary changes with the style rather than freezing today's hex value. Each bar can override both colors in its own settings, and a bar that overrides only its fill takes the value badge along with it.

Animation

Option	Description
Animation	Animate the bars fills them and counts the values up. On by default.
Duration	500 to 3000 milliseconds, 1000 by default.

Bars start when they scroll into view, so a set below the fold animates on arrival rather than while nobody is looking, and each element runs its animation once. Visitors who have reduced motion enabled in their system settings see the final values immediately.

Label and Range Max

Both parts take a Style (Heading H1 to H6, or Text Meta, Lead, Small or Large), a Font Family and a Color from the active theme style. They are set for the whole element, not per bar.

Panel, Grid and Columns

Panel holds Style — the card and tile variants of the active theme style, or a blank panel — and Padding.

Grid holds the Column Gap and Row Gap between bars and two alignment switches, Center columns and Center rows.

Columns sets how many bars sit side by side at each breakpoint, from Phone Portrait to X-Large (Large Screens). One column on phones by default. Inherit takes the count from the next smaller screen, and Auto expands the columns to the width of their bars.

Accessibility

Option	Description
ARIA Label	Names the set for assistive technology. Left empty, it reads the title, or Progress bars when there is none.

General and Advanced

The General group and the Advanced tab are the standard YOOtheme Pro element settings, documented under Elements for WordPress and Joomla.

Styling

The element exposes these classes to Custom CSS, alongside .el-element:

.pe-progress-bars, .pe-progress-bars-title, .pe-progress-bars-list, .pe-progress-bars-item, .pe-progress-bars-label, .pe-progress-bars-range-max, .pe-progress-bars-track, .pe-progress-bars-fill, .pe-progress-bars-value

Two CSS custom properties have no field and can be set on .pe-progress-bars:

Property	Effect
--pe-progress-bars-height	The thickness of the track, when none of the three heights is the one you want.
--pe-progress-bars-inside-height	The minimum height of a bar whose text sits inside it.

The track draws its own background from the current text color at ten percent, so a bar on a dark section stays visible without a setting. The text in the value badge is white, which suits the theme colors; to change it, target the span inside the badge with .pe-progress-bars-value span.

Accessibility and reduced motion

Every bar is a progressbar with its current value, its maximum and a name — the label, or Progress for a bar that has none. A bar in range mode also carries the spoken form of both numbers, 8 of 10, so a screen reader does not have to read a bare percentage.

The set itself is a labelled list, and the visible value badge is hidden from assistive technology, because the progressbar already carries the number and announcing it twice helps nobody.

Reduced motion is respected twice over: the count-up does not run, and the animated stripes hold still. Both are decided by the system setting, and changing that setting applies without a page reload.

Notes and limits

• Values are clamped to the range of the bar. Above the maximum fills it completely, below zero empties it, and a range maximum of zero falls back to 100.
• Decimals are kept to two places and trailing zeros are dropped, so 33.50 reads as 33.5 and counts up the same way.
• The value badge follows the fill and stops short of both ends of the track, so a bar at 2 percent still shows a readable number.
• The label inside a bar is clipped with an ellipsis when the fill is too short for it. Long labels belong above or below the bar.
• The bars are in the page source at their final width, and the script only animates from zero to that width. Without JavaScript the values are correct and static.