Progress bars are a beautiful, fun way to visually display percentage amounts on your website, whether it’s of goals completed, coffee’s drank or whatever information you may want to show.
The Blockons Progress Bars will only animate to the set amount once the block is scrolled into the page view, so your viewers eyes will get attracted to them once they scroll to the page section.
Example:
Progress bars are full customizable by design, colors, sizing, etc
Adding Progress Bars:
To add a progress bar to the page you can simply click the “Add Block” button in the WordPress block editor or open the left sidebar and search for “progress bar”, then click the block to add it to the page.
Once you’ve added a Progress Bar to the page and selected the block, you should see all the settings available in the right-hand sidebar panels.
You can change font sizes, label spacing, show/hide the percentages or progress bar labels and more… Simply edit the settings and change them to display the bars as you want them on your website.
You are also able to change the design of the bars under the Progress Bars Design panel.
There are 6 different design to choose from… Select the one you prefer and then you can further edit the colors of the bars, the background and the fonts.
Edit the progress bars on a per bar level
Once you’ve designed the bars, you can even edit them per bar.
If you have the Progress Bar block selected and you hover over a bar, you should see 3 extra icons display on the right of each bar. The 3 options are:
- Edit this Bar & Design – Here you will set the percentage for this bar, and you can override the default colors set in the sidebar settings.
- Duplicate this bar – This will duplicate this bar and place it right below.
- Delete this bar – Delete this bar from the block.
To add new progress bars to this block you can simply click the “Add a new progress bar button” within the block and edit it as you need.
If anything is not working as expected or you may have a feature request you think will work well with this block then please let us know.
