Description
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
progressbarrole. - 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.
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
- DesignOrbital Blocks Plugin – 35+ blocks and extensions for the block editor.
- DesignOrbital Pattern Library – 220+ predesigned patterns for building pages.
Blocks
This plugin provides 1 block.
- DesignOrbital Progress Bar Animated line progress bar with a label, value, stripes and custom colors.
Installation
- In your WordPress admin, go to Plugins Add New, search for “DesignOrbital Progress Bar Block”, then install and activate it.
- Alternatively, upload the
designorbital-progress-bar-blockfolder to/wp-content/plugins/and activate it from the Plugins screen. - Open the block editor, click the + inserter, and search for “DesignOrbital Progress Bar”.
FAQ
-
How do I change the progress value?
-
Select the block and use the Value slider in the block settings sidebar.
-
Can I turn off the scroll animation?
-
Yes. Open the Animation panel in the block settings and turn off Animate On Scroll.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“DesignOrbital Progress Bar Block” is open source software. The following people have contributed to this plugin.
ContributorsTranslate “DesignOrbital Progress Bar Block” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
- Initial release.

