Progress Bar

Progress Bar

Progress bar is a GUI Block to visualize the progress made by any activity or process till current timestamp.

In computer operational world, progress bar is mostly used to measure file upload, content download progress or installation of any program. Progress bar also works as pie chart but in a linear design, also displays content in percentage. Progress bar has so many dynamic option in web design which can be used for different purposes such as page scroll length and page load complete.

Pro tip
Progress bars are merely design components, it’s a psychological progress indicators used as a completeness satisfaction meters.

Configuration for Progress Bar

progress bar is always eye catching and even kids can understand by it’s simple but attractive UI. Just decide the numbers and you are on.

How to use the Progress Bar Block of The Plus Addons For Gutenberg

The Progress Bar block comes in two styles. You can create a pleasant-looking layout using a customized style option.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Progress Bar into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Progress Bar after “/” sign, eg.“/Progress Bar”, in the content area. Gutenberg also provides drag & drop after opening the list of Blocks panel.

After placing the Block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Layout

Select Layout

We have provided pie chart and progress bar in a single Block, so use Progress Bar select it in this drop down.

Style

Choose the layout from the list we provide.

Height (Style-1)

Select the height option suitable to your theme.

Content

Title

An input for title text to display with bar.

Sub Title

An input for sub title text to display with bar.

Value

Drop the main value part which denotes the value for bar. Other part will have different design and you can choose a value between 0 to 100.

Display Number

Number related to value will also be displayed.

Symbol

Symbol display with the number value.

Symbol Position

Display symbol prefix/ postfix the number value.

Icon/ Image

Icon Type

Icon type is a selection whether you want an icon or image or nothing.

Icon library and Select Icon

On selection of Icon in previous drop down, you’ll be displayed whole list of icons provided by the Font Awesome icon library. If you have purchased license for pro plan and activation has been done then you’ll able to use pro icons too.

Upload Image

On selection of an image in the previous drop-down, you’ll be asked to choose and upload an image, and after uploading the image, a basic styling option for the image would be displayed there.

Image Size

Set the image size options.

Position

Place icon/image before or after the content.

2. Style

The Style tab is used for customizing the appearance of all the Progress Bar Block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the Blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Progress Bar

Above Space

Set the margin top for progress bar from here.

Fill Background

A color picker to assign suitable color to the visible part of the track. Gradient support is also provided.

Empty Background

A color picker to assign suitable color to the blank part of the track.

Separator Color

A color picker to assign suitable color to the part which separators the bar.

Title

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the title text.

Spacing

Set spacing from left edge for title.

Sub Title

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the sub title text.

Number

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the number.

Number prefix/ Postfix

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the number prefix/ postfix text.

Icon/ Image

Icon Color

A color picker to assign suitable color to the icon.

Icon Size

Set the size of the icon from here.

Image Size

Set the size of the image from here.

Image Border Radius

Set the radius curve of the element’s corner.

3. Advanced

Advanced Tab Options are common across all the Blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.