XeroWP
DesignOrbital Progress Bar Block
DesignOrbital Progress Bar Block

DesignOrbital Progress Bar Block

0/5 (0 ratings) — active installs Updated Nov 3, 2026
blockgutenbergmeterprogressprogress bar
Download v1.0.1
The DesignOrbital Progress Bar block in the editor with the Value setting.

The DesignOrbital Progress Bar block in the editor with the Value setting.

This plugin adds an animated DesignOrbital Progress Bar block to the WordPress block editor. Show skills, goals, or any percentage as a clean line bar with a label and value.

Features

  • Native block built with the WordPress block API — no shortcodes, no page builder.
  • Editable label with a choice of heading or text tag, and an optional value with a custom suffix.
  • Show the value above the bar or inside the fill.
  • Adjustable bar thickness, and rounded or square ends.
  • Striped fill with optional stripe animation.
  • Fill color or gradient, track color, and value color and size.
  • Fills the bar and counts up the value when it scrolls into view, with an adjustable duration. Respects the visitor’s reduced-motion setting.
  • Typography, text color, and margin controls from the block editor.
  • Accessible markup using the ARIA progressbar role.
  • Lightweight: styles and scripts load only on pages that use the block.
  • Translation ready.

This plugin does not collect any data, set cookies, or connect to external services.

Premium Version

Need more than a line bar? DesignOrbital Progress Bar Block Pro adds circle, half circle, segmented and box layouts, plus finer control over the label and value. Pro includes every free feature and replaces the free plugin, so the progress bars you already built keep working and gain the Pro options.

Pro Block Features

  • Seven layouts: Line, Segmented, Circle, Circle Fill, Half Circle, Half Circle Fill, and Box.
  • Circle Fill and Half Circle Fill with a water or pie fill style.
  • Segmented bars with an adjustable number of segments and gap.
  • Adjustable size for circle layouts and height for the box layout.
  • Show or hide the label, and swap the label and value.
  • Place the label and value both outside, both inside, or the label outside with the value inside.
  • Adjustable spacing for the label and value.
  • Extra area and background colors.

👉 See the Live Preview of every Pro layout.

👉 Upgrade to Pro to unlock all layouts and options.

Built by DesignOrbital

This block is developed by DesignOrbital, a team building Full Site Editing themes, blocks, and patterns. Explore our free Full Site Editing themes.

Related resources