Progress Bar

Progress Bar

Whenever you need to showcase numbers in attractive way, you can use Qualia’s Progress Bar shortcode. It’s easy to use and has a lot of options you can customize. You can set its value from a range (minimum and maximum number), caption, track color and the bar color.

shadow-ornament

Below are examples of 2 progress bar with width set to 100% and 50% of its container width and an example of fixed width progress bar. Responsive progress bar will adapt into its container width. The wider its container, the longer bar it will be. You can set fixed width by setting the width in pixels (px).

0%
0%
0%
shadow-ornament

Below is some example of how you can customize what to display on the progress bar's label, whether it's the current value, or the percentage value, or even if you don't want any text above the bar you can hide it right away. The examples below will use range of 200 - 500 for the value range.

0%
0%
0%
shadow-ornament

You can enable or disable in-view animation for each progress bar you created. In-view animation will be triggered once the element enters the view port of the browser window.

0%
0%
shadow-ornament

Optionally you can activate featured mode on your progress bar to get more attention onto it. It is usually used to indicate more importance to the current point.

0%
0%
0%
0%
shadow-ornament

Best of all, we can have unlimited color combinations on your progress bars. Set different text color, track color, and also bar color! This lets you to have even more attractive and eye catching progress bars set on our page.

0%
0%
0%
0%