Progress Bar

Showcase progress of any activity by means of animated indicators with the Progress Bar block.

How To Add The Progress Bar Block

1. Open a page or a post and click on the plus icon to add a new block and look for the Progress Bar or you can search for it if it doesn’t pop up quickly for you.

2. By default, you'll get the below design-

How To Configure The Progress Bar Block

To configure the Progress Bar, switch to the ‘Content’ tab.

General

Progress Percentage - Adjust the progress in the block. Progress Bar Style - Select the progress bar style as Horizontal or Circular. Horizontal Progress Bar Style - Select the horizontal progress bar style as Plain, Striped, or Animated Striped. Circular Progress Bar Style - Select the circular progress bar style as Circle, Semi-circle.

Top Title Enable - Toggle button to display/hide top title for the horizontal progress bar.

Top Value Enable - Toggle button to display/hide top value for the horizontal progress bar.

Inner Title Enable - Toggle button to display/hide inner title for horizontal progress bar (not available in the striped progress bar).

Inner Value Enable - Toggle button to display/hide inner value for horizontal progress bar (not available in the striped progress bar).

Bottom Title Enable - Toggle button to display/hide top title for the horizontal progress bar.

Bottom Value Enable - Toggle button to display/hide top value for the horizontal progress bar.

Circle Inner Value Enable - Toggle button to display/hide percent value displayed inside the circle.

Circular Progress Bar Top Title Enable - Toggle button to display/hide top title for the circular progress bar. Circular Progress Bar Top Value Enable - Toggle button to display/hide top value for the circular progress bar.

Circular Progress Bar Bottom Title Enable - Toggle button to display/hide bottom title for the circular progress bar. Circular Progress Bar Bottom Value Enable - Toggle button to display/hide bottom value for the circular progress bar.

Semi-Circle Inner Value Enable - Toggle button to display/hide percent value displayed inside the semi-circle.

Semi-Circular Progress Bar Top Title Enable - Toggle button to display/hide top title for the semi-circular progress bar. Semi-Circular Progress Bar Top Value Enable - Toggle button to display/hide top value for the semi-circular progress bar.

Semi-Circular Progress Bar Bottom Title Enable - Toggle button to display/hide bottom title for the semi-circular progress bar. Semi-Circular Progress Bar Bottom Value Enable - Toggle button to display/hide bottom value for the semi-circular progress bar.

How To Style The Progress Bar Block

Switch to the ‘Style’ tab to customize every element of the Progress Bar block.

General Style

Horizontal Progress Bar Size - Adjust the height of the horizontal progress bar. Stripe Animation Duration - Adjust the animation duration of the stripes in the horizontal progress bar.

Circular Progress Bar Size - Adjust the size of the entire circle in the progress bar block. Circular Progress Bar Width - Adjust the width of the circular progress bar. Track Style - Select the circular progress bar track shape as Round or Square.

Semi Circular Progress Bar Size - Adjust the size of the semi circle in the progress bar block. Semi Circular Progress Bar Width - Adjust the width of the semi circular progress bar.

Colors

Progress Bar Color Type - Select the color type of the progress bar as Default, Info, Success, Warning or Danger. Progress Bar Colors (Available when “Progress Bar Color Type” selected as Default)

Background Color - Select the background color of the progress bar. Primary Track Color - Select the primary color for the progress bar track. Track Stripe Color - Select the color for the stripes in the progress bar track. Gradient Track Color - Toggle button to enable/disable gradient effect for progress bar track color. Secondary Track Color - While the “Gradient Track Color” is enabled, select the secondary color for the progress bar track. Track Color - Select the color for the circular or semi-circular progress bar track.

Text Colors

Top Title and Value Color - Select the text color for the top title and value, when the top title or value are set to be displayed. Inner Title and Value Color - Select the text color for the inner title and value, when the inner title or value are set to be displayed. Inner Value Color - Select the text color for the inner value of a Circle or a Semi-circle, when the inner value is set to be displayed.

Bottom Title and Value Color - Select the text color for the bottom title and value, when the bottom title or value are set to be displayed.

Border

Border Style - Select the border style of the Progress Bar container as Solid, Dotted, Dashed, Double, Groove, Inset, Outset, Ridge.

Border Width - Adjust the border width of the Progress Bar container.

Border Radius - Adjust the border radius of the Progress Bar container.

Border Color - Select the color of the Progress Bar's border.

Typography

Top Title and Value Typography (Available when top title or value of the progress bar are set to be displayed) Font Family - Select the font family of the top title and the value of the progress bar. Font Size - Select the font size of the top title and value of the progress bar. Font Weight - Select the font weight of the top title and value of the progress bar. Line Height - Select the line height of the top title and value of the progress bar. Letter Spacing - Select the spacing between the letters of the top title and the value of the progress bar.

Text Transform - Select the format for the top title and value of the progress bar as Default, Uppercase, Lowercase, or Capitalize.

Inner Title and Value Typography (Available when inner title or value of the progress bar are set to be displayed) Font Family - Select the font family of the inner title and the value of the progress bar. Font Size - Select the font size of the inner title and value of the progress bar. Font Weight - Select the font weight of the inner title and the value of the progress bar. Line Height - Select the line height of the inner title and the value of the progress bar. Letter Spacing - Select the spacing between the letters of the inner title and the value of the progress bar.

Text Transform - Select the format for the inner title and value of the progress bar as Default, Uppercase, Lowercase, or Capitalize.

Bottom Title and Value Typography (Available when bottom title or value of the progress bar are set to be displayed) Font Family - Select the font family of the bottom title and the value of the progress bar. Font Size - Select the font size of the bottom title and the value of the progress bar. Font Weight - Select the font weight of the bottom title and the value of the progress bar. Line Height - Select the line height of the bottom title and the value of the progress bar. Letter Spacing - Select the spacing between the letters of the bottom title and the value of the progress bar.

Text Transform - Select the format for the bottom title and value of the progress bar as Default, Uppercase, Lowercase, or Capitalize.