Back to Documentation

Progress Bars

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.


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

  • Happy Clients
    100%
  • Returning Clients
    70%
  • Clients converted to WordPress
    40%
  • Just another Progress bar
    48%

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.

Change the progress bar design
Change the progress bar design

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.
Edit each progress bar separately
Edit each progress bar separately

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.