Progress Bar

Make your website interactive with a stunning progress bar block for the WordPress block editor.

Part of the Essential Blocks family by WPDeveloper.

• Seven layouts: Line, Line Rainbow, Circle, Circle Fill, Half Circle, Half Circle Fill and Box
• Responsive controls for width, height, size, stroke and box dimensions
• Advanced and responsive typography options
• Scroll-triggered animation on the frontend
• Stripe animation, gradient fills and custom colours
• Show Inline layout for line-style bars

This repository uses git submodules for the shared controls package and the style-handler library. Clone with submodules, or the build will be incomplete:

git clone --recurse-submodules git@github.com:EssentialBlocks/progress-bars.git
cd progress-bars

Already cloned without them:

git submodule update --init --recursive

lib/style-handler writes the per-post CSS that the frontend depends on. If it is missing from a build, the editor still renders correctly while the frontend silently loses every generated style.

Install dependencies and build:

yarn install        # or: npm install
npm run build       # production build into dist/
npm start           # watch mode

Built with WP-CLI's dist-archive command, which respects .distignore:

wp package install wp-cli/dist-archive-command
wp dist-archive . ../progress-bars.zip

Note that .distignore entries must be written without a leading slash — dist-archive prefixes each entry with */, so /controls/ becomes *//controls/* and silently matches nothing.

• @RahatSheikhLeon
• WPDeveloper team

• Documentation
• Issue tracker
• Support forum

GPL-3.0-or-later. See the licence text.