Contact us at (01) 5241025 | info@exclusiveaudio.ie

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.


  Dynamic Width and Responsive  

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).

Responsive 100% Width
Responsive 50% Width
Fixed 200px

  Set the Text Label  

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.

Current Value Displayed
464
Percentage Displayed
88%
No Label Displayed

  Enable or Disable In-view Animation  

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.

Animation Disabled
54
Animation Enabled
54

  Enable or Disable Featured Progress Bar  

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.

Illustration
83%
Logo & Branding Identity
52%
Print Design
69%

  Play with Colors!  

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.

Illustration
83%
Logo & Branding Identity
52%
Print Design
69%