Progress Bar
Showcase progress of any activity by means of animated indicators with 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)
To configure the Progress Bar, switch to the ‘Content’ tab.
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)
Switch to the ‘Style’ tab to customize every element of the Progress Bar block.
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)
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)
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 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)
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.
.png?alt=media&token=ea0be556-893d-45a9-9fe8-d8db1159287f)
Last modified 1yr ago