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