Content Controls
Progress Bar
In the Content Controls section, you can personalize the basic elements of your progress bar. Adjust the progress level, change the title text, and choose to show or hide the progress percentage.
- Progress – Set the percentage level your progress bar displays, providing a visual representation of progress made.
- Title Text – Customize the title text of your progress bar to give context or label to the progress being shown.
- Hide Percentage – Choose whether to display or hide the percentage number on your progress bar for a cleaner look.
Design Controls
Progress Bar
In the Design Controls section, you can enhance the visual appeal of your progress bar. Adjust colors, shapes, and padding to match your website’s theme and style.
- Background Color – Change the background color of your progress bar to match or contrast with your site’s design.
- Disable Stripes – Toggle to turn off the stripe design on the progress bar for a solid color appearance.
- Border Radius – Adjust the roundness of the corners of your progress bar to fit your design aesthetics.
- Horizontal Padding – Modify the horizontal padding around your progress bar to control its width and spacing.
- Vertical Padding – Adjust the vertical padding to control the height and vertical spacing of your progress bar.
Container
The Container section allows for further customization of the progress bar’s overall container. Change background color, disable stripes, adjust border radius, and set the width to your preference.
- Background Color – Select a color for the background of the progress bar container to complement your design.
- Disable Stripes – Choose to have a solid background by toggling off the stripe design in the container.
- Border Radius – Define the curvature of your container’s corners to match your style preferences.
- Width – Set the width of the container to ensure it fits perfectly within your page layout.
Typography
Typography controls let you refine the text elements within your progress bar, including the title and percentage counter for a cohesive look.
- Title – Customize the font style, size, and color of the title text in your progress bar.
- Percent Counter – Adjust the typography of the percent counter for readability and style alignment.
Animation
The Animation section offers a variety of controls to add dynamic and engaging animations to your progress bar. You can add animated stripes, control the speed of these animations, and even trigger animations based on user scroll actions. These features add an interactive element to your progress bar, making it more visually appealing.
- Animation Stripes – Toggle this to add a moving stripe pattern to your progress bar, bringing a lively feel to your design.
- Animation Duration – Adjust the speed of the stripe animation. This option is only available if the Animation Stripes feature is activated.
- Animate Progress On Scroll – Enable this to start the progress bar animation when the user scrolls to it, making your content more interactive.
- Animate Once – Decide whether the scroll animation should happen just once or every time the user scrolls past it. This is only available when Animate Progress On Scroll is activated.
- Transition Duration – Set how long the transition effects last. This is available only when Animate Progress On Scroll is turned on.
Spacing
In the Spacing section, you can fine-tune the space around your progress bar for a clean and balanced layout. Adjust the margins to ensure your progress bar fits perfectly within your page and doesn’t feel cramped or overly spaced.
- Wrapper – Manage the overall spacing of the progress bar container.
- Margin Top – Increase or decrease the space above the progress bar to align it with your page’s design.
- Margin Bottom – Adjust the space below the progress bar for a balanced look and feel.
- After Title – Set the amount of space between the title and the progress bar to maintain visual harmony and readability.
