Add circular progress bars to your page to show percentages of completeness in a stylish, graphical form using the Circle Progress stack.
When enabled you'll be given additional options throughout the Circle Progress stack's settings that allow you to customize the Circle Progress' styling for visitors who have Dark Mode enabled in their computer's OS or browser.
This is where you will set the percentage value that will be displayed on the Circle Progress bar as well as in the center of the stack.
You're able to set the width of the Circle Progress stack at each of the three responsive breakpoints.
Choose from 5 different thicknesses for the progress circle.
Use a color picker to choose the color of the progress bar itself.
This color picker allows you to set the background circle behind the progress circle.
This color picker is for coloring the background of the center circle which contains the percentage text.
Show Percentage In Center
When enabled the percentage value you've assigned will be displayed in the center of the progress circle.
Allows you to use a color picker to choose the color of your percentage value in the center circle of the stack, if it is enabled.
Set a font size for your percentage value's text at each of the three responsive breakpoints.
Choose whether to have your percentage value text adopt the font settings from the Control Center stack or to use the Typeface stack for your font choices.
The default values and settings for headers on your page can be setup within the Foundry Control Center stack. There you can set font sizes, weights, colors and more.
Choose what weight you wish your font to be. The higher the number the more bold the font will be. If using the Typeface stack for your font choice be sure that you are loading the font weight you wish to use within the Typeface stack.
Ring & Center Circle Shadow Type
You're able to choose to have a normal drop shadow, or an inset shadow applied to your progress circle and / or the center circle that contains your percentage text. If you'd like a more flat look you can disable the shadows as well.
Shadow Size & Color
The shadow for the progress circle is actually made up of two shadows. This allows for a more realistic looking shadow. It also allows you to add a little color to your shadows as well. Experiment with them and see what kinds of interesting looks you can create.
Through just altering the shadow types and sizes you can get drastically different looking Circle Progress bars.