Canvas Docs

Rounded Skills

Circular progress skill bars with animated percentage indicators. It is shown in the block inserter as Canvas Rounded Skills and registered as canvas-core/rounded-skills.

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

The Rounded Skills 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:

Items

  • SkillsDefaultEmpty

    The circles in this set. Each row is one skill, drawn as a ring that fills to its percentage as the visitor scrolls to it.

    Each row of Skills takes:

    • PercentageDefault75

      How far round the ring fills, from 0 to 100.

    • Circle ContentDefaultPercentage number

      What sits in the middle of the ring: the percentage, wording of your own, an icon, a figure that counts up, or nothing at all.

      ChoicesPercentage numberStatic textIconAnimated counterNothing

    • TextDefaultEmpty

      Shown inside the circle when Circle Content is "Static text".

    • Icon ClassDefaultEmpty

      e.g. bi-star-fill or fa-brands fa-facebook-f. Used when Circle Content is "Icon".

    • Counter TargetDefault0

      Figure the counter climbs to. Leave it at 0 to count to the percentage above, which is what you want for a skill and not for a figure such as 250 projects.

    • Counter StartDefault1

      Figure the counter starts from.

    • Counter SuffixDefault%

      Characters printed after the figure, such as a percent sign, a plus or "k".

    • Counter Speed (ms)Default0

      0 = finish 500ms before the circle animation ends.

    • Bar Color (hex / CSS)DefaultEmpty

      Colour of the filled part of this ring. Leave empty for the theme colour.

    • Diameter Override (px)Default0

      0 = use the block-level diameter.

    • Stroke Width OverrideDefault0

      0 = use the block-level stroke width.

    • Animation Speed Override (ms)Default0

      0 = use the block-level speed.

    • Extra Circle ClassesDefaultEmpty

      Utility classes on the .rounded-skill element itself (e.g. "mb-0").

Settings

  • WrapperDefaultGrid (row + columns)

    Bare Circles emits just the circles, with no row or column shell, so a single circle drops into a column you have already laid out yourself.

    ChoicesGrid (row + columns)Bare Circles (no grid)

  • Circle Diameter (px)Default140

    How wide every ring is drawn, in pixels. A single skill can override it.

  • Stroke WidthDefault4

    How thick the ring itself is. Raise it for a heavier, more solid circle.

  • Animation Speed (ms)Default2000

    How long each ring takes to fill once it comes into view, in milliseconds.

  • Track Color (hex / CSS)DefaultEmpty

    Leave empty to use the theme default.

  • Line CapDefaultEmpty

    How the two ends of the filled arc are shaped. Round softens them; Butt cuts them square at the exact percentage.

    ChoicesDefault (empty)SquareRoundButt

Layout

  • ColumnsDefault4

    How many circles sit side by side on a wide screen. Narrow screens stack them.

  • Column ClassesDefaultEmpty

    Overrides the grid class derived from Columns. Applied to every column.

  • Row ClassesDefaultEmpty

    Extra utility classes on the wrapping .row.

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

Other blocks in Content: Background Video / Audio, Cascading Images, Charts, Circle Stack, Clients, Data Tables.

Was this page helpful?