Helps you to covey percentage based information to your visitors using progress bars.
The Progress Bar tool allows you to create normal or stacked progress indicators as well as add a bit of animation to them, which can is triggered as the visitor scrolls down the page.
Here's a basic progress bar, with a single value and its default settings applied. As-is this provides a nice looking way to show progress or percentages.
In this example we've stack two different progress bar child items to create this combined Progress Bar. We've also enabled the values to be shown as well.
These two Examples show off our Animate on Scroll feature, which animates the bar into place when the visitor reaches this section of the page.
Size the progress bars to your liking, fitting the look and feel of the rest of the elements on your page. You can also adjust how round the corners are as well.
We've added a great deal of new features for Progress Bar. You can now animate the progress indicator's amounts as the visitor scrolls down the page, as well as build stacked, or split progress bars displaying multiple items within one bar, and much more
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.
This setting allows you to adjust the height, or thickness, of the entire progress bar and its child items.
Gives you the ability to choose between Pixels (px) or Root Em (rem) for your Progress Bar height. The default for this setting is Root Em (rem).
When enabled an inner shadow will be applied to the Progress Bar to simulate it being inset into the page. If you've enabled this setting you'll also be able to choose the color of the shadow as well using a color picker.
Use this color picker to adjust the background color of the entire Progress Bar. This is the color of the main parent tool.
Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
This field allows you to replace the default HTML Comment with your own text.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
This is the main setting for child items, allowing you to choose the size, or percentage for this segment of the progress bar.
Enabling this setting will display the value for this Progress Bar segment.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the this item. You're also provided an option to choose a custom one-off color as well.
This setting, when enabled, will add deocrative stripes on top of of this segment of the Progress Bar.
Enabling this option will animate the decorative stripes. This feature is avalble only when the "Add Stripes to Progress Bar" feature is turned on.
This Progress Bar segment will animate in, from left to right, when the visitor scrolls down the page, arriving at the Progress Bar.
When enabled the animation will occur only the first time the element would be triggered. After that if the visitor scrolls past the element on the page again it will remain visible and will not trigger the animation again. When disabled the animation will trigger whenever the element comes within view and meets the tigeering offset requirements.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.