Progress Bar
Visualize a progress with animated progress bar.
How Progress Bar Works
Progress Bar element allows displaying a progress visually in an animated progress bar.
A progress bar comes with label, value (number), unit and a bar that shows progress. With a single Progress Bar element, you can add multiple progress bars.
There are also a wide range of options to customize such as animation speed, text position, bar height, border, font size, color and more.
Striped Bars
Have your progress bars filled with solid color or with stripes.
3 Text Positions
Choose relevant position for the text with 3 options: above bar, inside bar and below bar.
Above Bar
Inside Bar
Below Bar
Unit Control
Depending on each situation, you can decide to include unit in the progress bars or not.
Progress Bar With No Unit
Progress Bar With Unit
Animation Speed
Specify the number of seconds to complete the animation.
Customization Options
All progress bars in a single Progress Bar element share the same custom options including bar height, border radius, border style, border width, text font size and text font weight.
For each progress bar, you can customize different text color, border color, bar filled and unfilled colors.