Progress

Base Foundry stack

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

  • Set percentage using simple slider
  • Choose from preset or custom colors
  • Change progress bar background color
  • Opt to show the percentage as text on the progress bar
  • Add stripes to your progress bar
  • Opt to animate stripes
  • Choose the height of your progress bar
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

90%

Using Progress

General

Percentage
Allows you to adjust how complete the progress bar is. It goes from 0% to 100%.

Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the Progress stack.

Custom Height
When enabled you can choose to set a custom height for your progress bar.

Custom Rounded Corners v2
Allows you to change the border radius, or roundness of your progress bar.

Style

Empty Bar Space
Lets you choose the background color of your progress bar in areas what have not been filled.

Style
Choose from one of Foundry’s prebuilt color swatches for your progress bar’s color, or use the RapidWeaver color picker to choose your own custom color.

Starting with Foundry v2 you can also opt to use a custom gradient for your progress bar's background. v2

Striped & Animate Stripes
Add stylish stripes to your progress bar. When you are using the striped version of the progress bar you can even choose to have them subtlety animate.