How to Use the Progress Bar and Progress Circle Blocks

With Stackable’s Progress Bar and Progress Circle blocks, you can showcase the progress of certain tasks and display statistics in an engaging and attractive way on your website.

There are different things you can show with these blocks such as your download or success rate, percentage, ratings and more.

Using the Progress Bar and Circle Blocks

Once you’ve added the Progress Bar or Circle block, you will see the Progress Bar/Circle panel and  Label panel in the Style tab of the Inspector.

The Progress Bar/Circle panel is where you can adjust the percentage of the block which will show the progress you want to display. This is also where you will see the block’s design options such as the size, color, animation and more. 

The Label panel, on the other hand, focuses on controlling the text content and its styling.

You can adjust the contents of the block, such as the Progress Prefix, Progress Suffix, and Typography settings for both blocks:

As well as the as the Progress Bar Text for the Progress Bar block:

The Progress Bar and Progress Circle have the same purpose and offer similar options. The only difference is how you want it to be presented — as a bar or as a circle!

Designing the Blocks

Under the Progress Bar panel, you can adjust the block’s Width, Height, and Border Radius accordingly.

For the Progress Circle block, under the Progress Circle panel, you can adjust the Size and Thickness of the block, and toggle between Rounded or not.

To make it more eye catching, you can adjust the bar color with either a single color or gradient.

… And add a singular background color as well. 

You will also find the Accessibility Label field for both blocks. This is where you can add custom accessibility labels (e.g. SEO). 

If you choose to leave it blank, the default value fallback of the Progress Bar block is the Progress Bar Text value under the Label panel. Since the Progress Circle block has no custom text, it will not have a default value.

A good thing to note is that this doesn’t just work with fixed ranges. You can use decimal points as well, making it more dynamic.

Also, instead of the typical 0-100 fixed range, you can customize it to make it 0-365 or 0-10, it’s up to you! We have the Maximum Progress option which is used to set the maximum limit of the Progress Bar or Circle. 

To make it more engaging to your site visitors, you also have the option to animate the bar once the block comes to view. All you need to do is to toggle on the Animate setting. 

Note that the animations will be disabled for visitors who have disabled animations or reduced motion set in their browser or operating system. 

You also have the option to toggle on or off the Label setting. The Label panel focuses on controlling the text content and its styling.

If you choose to keep the label on your block, you have a bunch of Typography settings such as the text size, color and shadow/outline to add more personality to your block.