Skill Bars (Gutenberg)
Show skills or progress as bars that fill in.
Several labelled skill bars or rings in one block that fill and count up when scrolled to, with bubbles, stripes, gradients and per-skill colours; reduced motion shows the final values.
Gutenberg block
Requirements
- The block editor (Gutenberg)
- WordPress 6.5 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Open the page or post in the block editor.
- Click + (Block Inserter) and search for Skill Bars (Gutenberg) — it is in the Moduly category.
- Insert it, then fill in its content on the canvas. Ready-made presets appear when you insert it, and later under Transform to in the block toolbar.
- Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.
Settings
Layout
| Setting | What you can set |
|---|---|
| Show as | bars or circles |
| Name and value | outside, inside or side |
| Value | end, bubble or none |
| Fill | solid, gradient or striped |
| Moving stripes | On / off |
| Columns | 1–6 |
| Columns on phones | 1–4 |
| After the number | Text |
| Name tag | Text |
| Name for the group (screen readers) | Text |
| Fill | Colour |
Animation
| Setting | What you can set |
|---|---|
| Fill when scrolled to | On / off |
| Duration (ms) | 200–8000 |
| Delay between skills (ms) | 0–2000 |
| Easing | out, inout, linear or back |
| Count the numbers up | On / off |
| Play again each time it comes into view | On / off |
Sizes
| Setting | What you can set |
|---|---|
| Bar height (px, -1 for automatic) | -1–80 |
| Bar corners (px, -1 for round) | -1–40 |
| Outline the track | On / off |
| Space between skills (px) | 0–120 |
| Name column (px) | 40–400 |
| Ring size (px) | 60–400 |
| Ring thickness | 1–40 |
| Line end | round or butt |
| Gradient end | Colour |
| Track | Colour |
| Text inside the bar / in the ring | Colour |
| Names | Colour |
| Values | Colour |
| Bubble | Colour |
| Icons | Colour |
Styles tab: typography and spacing, from WordPress's own design tools.
Tips
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
- Not sure where to start? Insert one of its presets and edit from there.
Troubleshooting
- Skills are edited in the sidebar, not on the canvas.
- A set of bars repeats Counter's single bar; Counter remains the choice for one big number with an icon.
- Pre-existing elementorFrontendConfig is not defined front-end error for logged-in users (Elementor).
- A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.
Related
- Works well with: Horizontal Timeline (Gutenberg), Info Box, Timeline.