A progress bar is a great way to show visually how much progress has been made on any kind of project, be it software, donations, or any other kind of work. To get started, drag the Progress Bar component to a page of your site.
Click on the component to open the options panel. The most important option to set is the Percent Complete option. Enter a number and the component will update the progress bar and text to match. Note that you can enter a number larger than 100 - this can be useful with donations, for example, where you might exceed your goal.
There are more options to further customize the look of the component, too:
- Size & Position
- Height - Enter a number to set the height of the bar.
- Width - By default the bar takes up the full width of the component, but you can set this to a smaller proportion. Click on the desktop/mobile icon to set this separately for large and small screens.
- Alignment - If you’ve set the width to something other than full, you can choose to align the bar to the left, right, or center.
- Design
- Text Color - Change this option to custom and choose a color to update the color of text shown on the progress bar.
- Shape - By default this shares your overall shape settings used by buttons and other components. You can update this to something else to have a different shape. You can set this separately for large and small screens by clicking the desktop/laptop icon.
- Progress Bar Background - By default the bar uses a color set in your site styles. You can set a different color, a gradient, or even an image. If you choose image, there are additional options to control how the image is used:
- Repeat
- Position
- Size
- Parallax
- Background - This option controls what you see in the incomplete portion of the bar. By default this is a color, but you can choose from the same options as shown above for the progress bar.
- Border - With this option you can control the border around the progress bar. If you select something other than none, you’ll see additional options for color and style.
- Spacing - The margin option found here controls the space around the progress bar within the component. You can set this separately for large and small screens by clicking the desktop/mobile icon.