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-
.png?alt=media&token=461517b9-e68b-4f4c-8e67-3500b55c44eb)
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.
.png?alt=media&token=6c7ab410-c302-4f00-a508-295c1426e4e6)
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.
.png?alt=media&token=9b4629c8-2a3a-4e1d-809f-df3589370ed9)
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.
.png?alt=media&token=a9e3bb14-a286-45f1-b2c9-73d703146977)
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.
.png?alt=media&token=65bb9cff-a3da-4805-a487-87254a93c5cd)
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.
.png?alt=media&token=047a715c-a517-4732-80ff-8e48e3402ef2)
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.
.png?alt=media&token=b4fa5d9d-fd3c-42b2-b184-42f076857231)
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.
.png?alt=media&token=1d8c2f19-bdf1-4b0d-883d-0dcd58d75c78)
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.
.png?alt=media&token=ecdc9275-fd85-4317-8a35-501e4d6b372a)
.png?alt=media&token=80828d11-4402-4178-89b5-51c6b9535e66)
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.
.png?alt=media&token=e870e56f-3dd5-466d-8848-f9600a218aa1)
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.
.png?alt=media&token=4f4c7528-d921-4237-9f6f-8c58ebc111b0)
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.
.png?alt=media&token=21198868-2e44-4c67-92af-5b95bf46727a)
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.
.png?alt=media&token=2053c17f-d1c9-4def-a916-7e2445974c7d)
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.
