Circle Progress

Potion Pack addon stack

Add circular progress bars to your page to show percentages of completeness in a stylish, graphical form using the Circle Progress stack.

  • Choose either the colors for your progress bar, background and center of your progress circle.
  • Choose between inset or normal shadows for the progress bar and center circle, or disable them altogether.
  • Set an outside width for your progress circle at each breakpoint.
  • Choose from 5 different thickness levels for your progress circle.
  • Allows you to assign a Typeface font to the percentage number inside the circle.
  • Allows you to use Dark Mode to choose alternate colors for visitors who are using Dark Mode.

Example

Using Circle Progress

General

Dark Mode
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.

  • Please Note: Features marked with the purple moon icon will include color picker(s) for Dark Mode when Dark Mode is enabled.

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

Styling

Outer Width
You're able to set the width of the Circle Progress stack at each of the three responsive breakpoints.

Thickness
Choose from 5 different thicknesses for the progress circle.

  • Extra Small
  • Small
  • Medium
  • Large
  • Extra Large

Progress Bar
Use a color picker to choose the color of the progress bar itself.

Bar Background
This color picker allows you to set the background circle behind the progress circle.

Circle Background
This color picker is for coloring the background of the center circle which contains the percentage text.

Text

Show Percentage In Center
When enabled the percentage value you've assigned will be displayed in the center of the progress circle.

Text Color
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.

Font Size
Set a font size for your percentage value's text at each of the three responsive breakpoints.

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

Font Weight
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.

Shadow

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.

Insight
Depth

Through just altering the shadow types and sizes you can get drastically different looking Circle Progress bars.