Progress Ring

Progress Ring

Progress Ring is perfect for displaying various types of data. Use it when you need to display sales percentages, skill levels, stock percentage, or any other numbers. Qualia makes it really easy to customize with the options provided. See the example below to get a better understanding of what you can do with this shortcode.

shadow-ornament

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

Responsive 100% Width
Responsive 50% Width
Fixed 200px
shadow-ornament

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

Current Value Displayed
Percentage Displayed
No Label Displayed
shadow-ornament

Below is the example of how you can customize the ring’s thickness. The range of ring’s thickness is from 0.05 (5% of circle radius) to 0.5 (50% of circle radius). See examples below.

Minimum Ring's Thickness
20% Ring's Thickness
Maximum Ring's Thickness
shadow-ornament

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

Animation Disabled
Animation Enabled
shadow-ornament

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