Rounded Skill

One circular skill ring that fills to its percentage, showing the figure, your own text, an icon or a counter in the middle. It is shown in the block inserter as Rounded Skill and registered as canvas-core/rounded-skill.

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

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

• 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

  The wording inside the ring.

  Shown when Circle Content is "Static text"

• IconDefaultEmpty

  The icon inside the ring, e.g. bi-star-fill or fa-brands fa-facebook-f.

  Shown when Circle Content is "Icon"

• Counter TargetDefault0

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

  Shown when Circle Content is "Animated counter"

• Counter StartDefault1

  Figure the counter starts from.

  Shown when Circle Content is "Animated counter"

• Counter SuffixDefault%

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

  Shown when Circle Content is "Animated counter"

Style

• Diameter (px)Default140

  How wide the ring is drawn, in pixels.

• Stroke WidthDefault4

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

• Bar ColorDefaultEmpty

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

• Track ColorDefaultEmpty

  Colour of the unfilled part of the ring. Leave empty for 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

Settings

• Animation Speed (ms)Default2000

  How long the ring takes to fill once it comes into view, in milliseconds. 0 leaves the speed to the theme.

• Counter Speed (ms)Default0

  How long the counter takes to climb. 0 finishes it 500ms before the ring does.

  Shown when Circle Content is "Animated counter"

Related

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.