Canvas Docs

Progress Bars

Animated skill/progress bar with percentage counter, horizontal or vertical orientation, and Bootstrap stripe patterns. It is shown in the block inserter as Canvas Progress Bar and registered as canvas-core/progress-bar.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Progress Bars settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

  • LayoutDefaultSkill Bar (animated)

    Track Fill emits a single .progress-bar element with no track of its own, so it drops into your own .progress container, and several fills stack inside one track.

    ChoicesSkill Bar (animated)Track Fill (.progress-bar)

  • TitleDefaultHTML

    What the bar is measuring, shown above it.

    Shown when Layout is "Skill Bar (animated)"

  • Fill LabelDefaultEmpty

    Text inside the fill. Leave empty for a bare bar.

    Shown when Layout is "Track Fill (.progress-bar)"

  • Label for Screen Readers OnlyDefaultOn

    Wrap the label in .visually-hidden instead of printing it on the bar.

    Shown when Layout is "Track Fill (.progress-bar)"

  • Expose Progress to Assistive TechDefaultOn

    Announces the bar and the figure it has reached to screen readers. Turn it off for a purely decorative segment of a stacked bar, which has no figure of its own to report.

    Shown when Layout is "Track Fill (.progress-bar)"

  • PercentageDefault80

    How far the bar fills, and the figure the counter climbs to.

  • Animation Speed (ms)Default1200

    How long the bar takes to fill once it comes into view, in milliseconds.

  • Show CounterDefaultOn

    Prints the figure beside the bar and counts it up as the bar fills.

  • Counter PrefixDefaultEmpty

    Written immediately before the figure, for a currency symbol or a word such as "over".

    Shown when Show Counter is on

  • Counter SuffixDefault%

    Written immediately after the figure, for a percent sign or a unit.

    Shown when Show Counter is on

  • Counter PlacementDefaultEmpty

    Where the percentage counter sits. Horizontal bars default to the title row, vertical bars to the foot of the bar.

    ChoicesDefault for the layout (empty)In the title rowAbove the barAt the foot of the barOver the whole barOver the filled partBeside the barShown when Show Counter is on

  • Counter TargetDefault0

    Count to a value other than the percentage (e.g. a donation total). 0 = use the percentage.

    Shown when Show Counter is on

  • Counter StartDefault0

    Figure the counter starts from before it climbs.

    Shown when Show Counter is on

  • Text After CounterDefaultEmpty

    Plain text rendered after the counter, inside its wrapper.

    Shown when Show Counter is on

  • Text After Counter Sits Inside ItDefaultOff

    Render the text after the counter INSIDE the counter element, so the number and its label read as one line (e.g. "$120,000 Donated of $210,000").

    Shown when Show Counter is on

  • Thousands SeparatorDefaultOff

    Group the counting number with commas.

    Shown when Show Counter is on

  • Counter PlaceholderDefault0

    Shown inside the counter until the animation runs. Empty renders nothing.

    Shown when Show Counter is on

  • Counter Refresh IntervalDefault30

    Milliseconds between counter frames. Lower counts more smoothly.

    Shown when Show Counter is on

  • Count On LoadDefaultOn

    Off waits for the bar to scroll into view before counting.

    Shown when Show Counter is on

  • Animate The TrackDefaultOn

    Off fills the track immediately instead of animating it.

  • Title Inside the BarDefaultOff

    Move the title into the counter overlay instead of a separate title row.

    Shown when Counter Placement is "Over the whole bar" or "Over the filled part"

  • Title HTML TagDefaultH5

    Element the title uses. A row of bars usually wants a paragraph or a span, so a long list of skills does not fill the page outline.

    ChoicesH1H2H3H4H5H6pspan

Settings

  • Bar StyleDefaultDefault

    How the filled part is drawn: a solid block, diagonal stripes, or stripes that keep moving.

    ChoicesDefaultStripedAnimated Striped

  • OrientationDefaultHorizontal

    Whether the bar fills from left to right or from the bottom up.

    ChoicesHorizontalVertical

  • Bar Color ClassDefaultbg-primary

    Bootstrap background class for the fill (e.g. bg-primary, bg-success).

  • Custom Bar ColorDefaultEmpty

    Exact colour for the filled part, for a shade the presets do not offer. Clear the Bar Color Class when you set one here, so the two do not compete.

  • Gradient Bar ColorDefaultEmpty

    Fades the filled part between two colours instead of using one flat colour.

    ChoicesNone (empty)Blue → PurpleDarkEarthOceanGrey → BrownBlue → GreenHorizon

  • Track ColorDefaultEmpty

    Colour of the empty groove behind the fill. Leave it unset to keep the theme default.

  • Bar HeightDefaultEmpty

    How thick the bar is drawn. A hairline reads as a quiet indicator; a thick bar carries a figure inside it.

  • Border RadiusDefaultEmpty

    How round the ends of the bar are. A large value gives fully rounded caps; zero gives square ones.

  • Vertical Bar WidthDefaultEmpty

    How wide the upright bar is drawn.

    Shown when Orientation is "Vertical"

Classes

  • Title Row ClassesDefaultEmpty

    Replaces the layout default on .skill-progress-title. Enter "none" for no classes at all.

  • Title Row IDDefaultEmpty

    Gives the title row a name of its own so the bar can point at it, which is how a screen reader learns what the bar is measuring.

  • Counter LabelDefaultEmpty

    Accessible name for the percentage badge, which otherwise reads as a bare number.

  • Track LabelDefaultEmpty

    Accessible name for the track element.

  • Counter Inline StyleDefaultEmpty

    One-off styling for the figure, such as an exact size no class covers.

  • Title Text ClassesDefaultEmpty

    Classes on the title text itself, for its weight, size or the gap under it.

  • Bar Track ClassesDefaultEmpty

    Extra classes on .skill-progress-bar.

  • Bar Fill ClassesDefaultEmpty

    Extra classes on .skill-progress-percent.

  • Counter ClassesDefaultEmpty

    Classes on the figure itself, for its colour and weight.

  • Counter Wrapper TagDefaultEmpty

    Element wrapped around the figure. Choose No wrapper when the figure should sit directly in the line it is part of.

    ChoicesDefault for the placement (empty)divsmallspanNo wrapper

  • Counter Wrapper ClassesDefaultEmpty

    Replaces the placement default on the element wrapping the counter.

  • Overlay ClassesDefaultEmpty

    Replaces the default on the positioned counter layer (bar overlay / bar foot).

  • Overlay Text ClassesDefaultEmpty

    Classes on the element wrapping the counter inside an overlay (or on the "Above the bar" block).

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Canvas: Alerts, Buttons, Code Highlight, Counters, Dividers, Dropcaps.

Was this page helpful?