Progress Bar
Bring progress to life with a dynamic animated bar.
Number Affix
Add a prefix and suffix to the number and customize them with typography and text shadow settings.
Number Visibility
Show or hide the number in the progress bar.
Number Position
Place the number inside, above, or below the bar.
Number Alignment
Align the number left, center, or right relative to the filled bar.
Number Spacing
Customize the spacing between the number and the bar.
Affix Spacing
Customize the spacing between the prefix, number, and suffix.
Bar Height
Set the height of the progress bar.
Height: 24px
Height: 100px
Bar Color
Set colors for the filled and unfilled portions of the bar.
Filled Bar Color: #25A55A
Filled Bar Color: #E62214
Unfilled Bar Color: #25A55A
Unfilled Bar Color: #FCB700
Animation Duration
Control how long the progress bar takes to reach the target number.
Duration: 1000ms
Duration: 5000ms
Number Text Styling
Customize the number with full text styling controls, including font family, weight, size, color, styles, line height, letter & word spacing, and text shadow.
Explore More Blocks
Build Stunning Content With Page Builder
30-day money back. Free lifetime updates