How to Use the Progress Bar Block

The Progress Bar is an interactive block that enables you to showcase the progress of any project completion, milestones achieved, or skills developed. You can also add a numerical value or percentage to make the presentation more meaningful.

In this documentation, we’ll guide you on how to use the Progress Bar block.

Adding the Progress Bar Block #

Press the Plus (+) icon and open the Gutenberg Block Editor.
Write Progress Bar on the search box.
Click the block when it comes below.

General Settings #

Come to the General section on the right sidebar.
You can customize the Thickness and Value of the Progress Bar from here.
Don’t forget to write a heading for the bar.

Note: You can create horizontal and circular Progress Bars with this block. The below one is the Vertical Progress bar. The Value defines the percentage of the progress bar.

Set Thickness and Value of the Progress Bar

Click the Circular option to make the progress bar round shaped.
Set its Thickness, Circle Size, and Value the same way.

Take a look at some progress bars designed with the block.

Style #

Expand the Style section on the right sidebar.
You’ll get options to change the Progress Bar Color, Background Bar Color, and Label Color.

How to Show Multiple Progres Bars #

You may want to showcase the progress of multiple projects or your multiple skill levels. You will need multiple Progress Bars in this case. We’ll now show you how to show multiple Progress Bars of the two types.

Show Multiple Horizontal Progress Bars

Press the Progress Bar icon on the Gutenberg Block Editor.
Click the Group option that comes below.

Click the Group icon again to select this block area.
Press the Plus (+) icon close to the bottom-right corner of the block.
Add a new Progress Bar from the block editor.

Colorize the Progress Bars following the guide we showed above.
Give a heading to each bar so they can communicate their purpose.

Show Multiple Circular Progress Bars

Select the Columns block.
Type Cloumns in the Gutenberg Search box.
Click it once the block comes below.

Select a suitable column type.
We have selected the 33/33/33 column style for this tutorial.
Click on the style you selected.

Add Progress Bars from the Gutenberg Block editor one by one.
Colorize the bars the same we showed you above.

Add a New Block to the Circular Shaped Progress Bar

Conclusion #

Progress Bars today are a smart way of presenting and communicating valuable information about your skills, progress, availability of resources, and more. You’ll hardly find any website today, not including progress bars for communication.

Hope you have found this tutorial helpful enough to use this block. If you still face any problems, please comment us below. Our team will reach you soon.