Content · Gutenberg
Progress Circle block for WordPress
Animated SVG circular progress rings — perfect for skills, stats, and KPIs.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Animated SVG circular progress rings — perfect for skills, stats, and KPIs.
Inspector panels on this block: Items, Layout, Ring Style, Card Background, Animation. Those titles come from index.js, not from a shared template.
Behavior controls: “Ring Style” options: Round caps, Square caps, Flat caps; “Text Align” options: Left, Center; “Label Position” options: Below ring, Inside ring; “Easing” options: ease-in-out, ease-out, ease-in, linear.
Where to find it
Gutenberg inserter → Content → search “Progress Circle” (block name `blockenberg/progress-circle` in block.json). Style it in the sidebar after insert.
How to use Progress Circle block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Progress Circle”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Items. Set “Percentage”, “Label”, “Subtext”, “Columns”.
- Check the published page. The view script reads HTML data attributes: data-animate, data-color, data-counter, data-duration, data-easing, data-grad-end, data-gradient, data-linecap. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Percentage | Numeric range control in the inspector. Range 0–100. |
| Label | Text field in the inspector. |
| Subtext | Text field in the inspector. |
| Columns | Numeric range control in the inspector. Range 1–8. block.json default: 4. Saved as `columns`. |
| Ring Size (px) | Numeric range control in the inspector. Range 60–300. block.json default: 140. Saved as `size`. |
| Stroke Width | Numeric range control in the inspector. Range 2–40. block.json default: 10. Saved as `strokeWidth`. |
| Ring Style | Select control; the chosen value is saved on the block. Options: Round caps; Square caps; Flat caps. block.json default: round. Saved as `ringStyle`. |
| Text Align | Select control; the chosen value is saved on the block. Options: Left; Center. block.json default: center. Saved as `textAlign`. |
| Column Gap (px) | Numeric range control in the inspector. Range 8–80. block.json default: 32. Saved as `gap`. |
| Suffix (e.g. % or pts) | Text field in the inspector. block.json default: %. Saved as `suffix`. |
| Show Percentage | On/off toggle in the inspector. On by default. Saved as `showPercentage`. |
| Show Label | On/off toggle in the inspector. On by default. Saved as `showLabel`. |
| Label Position | Select control; the chosen value is saved on the block. Options: Below ring; Inside ring. block.json default: below. Saved as `labelPosition`. |
| Show Subtext | On/off toggle in the inspector. Off by default. Saved as `showSubtext`. |
| Percentage (Pct Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `pctTypo`. |
| Label (Label Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `labelTypo`. |
| Subtext (Subtext Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `subtextTypo`. |
| Gradient Fill | On/off toggle in the inspector. Off by default. Saved as `showGradient`. |
| Drop Shadow | On/off toggle in the inspector. Off by default. Saved as `showShadow`. |
| Show Card Background | On/off toggle in the inspector. Off by default. Saved as `showBackground`. |
| Corner Radius | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `backgroundRadius`. |
| Card Background — Padding | Numeric range control in the inspector. Range 0–60. block.json default: 20. Saved as `backgroundPadding`. |
| Card Shadow | On/off toggle in the inspector. On by default. Saved as `backgroundShadow`. |
| Animate on Scroll | On/off toggle in the inspector. On by default. Saved as `animateOnScroll`. |
| Counter Animation | On/off toggle in the inspector. On by default. Saved as `counterAnimation`. |
| Duration (ms) | Numeric range control in the inspector. Range 300–3000. block.json default: 1200. Saved as `animationDuration`. |
| Easing | Select control; the chosen value is saved on the block. Options: ease-in-out; ease-out; ease-in; linear. block.json default: ease-in-out. Saved as `animationEasing`. |
| Track Color | Color control in the inspector. block.json default: #e5e7eb. Saved as `trackColor`. |
| Percentage Color | Color control in the inspector. block.json default: #1e1e1e. Saved as `percentageColor`. |
| Label Color | Color control in the inspector. block.json default: #374151. Saved as `labelColor`. |
| Subtext Color | Color control in the inspector. block.json default: #9ca3af. Saved as `subtextColor`. |
| Gradient End Color | Color control in the inspector. block.json default: #ec4899. Saved as `gradientEnd`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `backgroundColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-animate, data-color, data-counter, data-duration, data-easing, data-grad-end, data-gradient, data-linecap.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Animated SVG circular progress rings — perfect for skills, stats, and KPIs — that is the job of Progress Circle, not a generic content block.
- Use it when you need the editor control labeled “Percentage”, which exists on this block’s inspector.
- It matches pages about circle, progress, ring.
- Inserter grouping: articles, cards, lists, and long-form layouts.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Progress Circle block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Progress Circle”. It sits under Content. After insert, open Items and set “Percentage”, “Label”, “Subtext”, “Columns”.
What makes Progress Circle different from other Blockenberg blocks?
Animated SVG circular progress rings — perfect for skills, stats, and KPIs. Inspector labels on this block include “Percentage”, “Label”, “Subtext”, “Columns”.
Is the Progress Circle Gutenberg block free?
Yes. Progress Circle ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Progress Circle to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Items, Layout, Ring Style, Card Background).
Related content blocks
Progress Bar
Display animated progress bars with customizable styles and labels.
Interactive Checklist
A fully interactive checklist with progress tracking, emoji icons, add/remove items, and optional persistence via localStorage. Rich color and layout controls.
Step Progress
Horizontal wizard progress bar showing current step out of N with labels and colors.
Accordion
Collapsible accordion panels for FAQ, features, and more.
Accordion Table
A data table where each row expands on click to reveal rich detail content — specs, bullet points, sub-data, or notes. Perfect for pricing tiers, product specs, API docs, and comparison matrices.
Alert / Notice
Info, success, warning or error notice block with icon, title and body text. Pure CSS — zero JS.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Progress Circle from the Gutenberg inserter.