Progress Bar
Adds a bar below the header showing the scroll progress of the page.
View a live demo of this module.
Styles
- Change the height and color of the bar
How to Use This Module
The Progress Bar module helps visitors understand how much content remains on long-form pages, improving user experience and encouraging readers to continue scrolling. This visual indicator is particularly valuable for nonprofits sharing detailed impact stories, educational institutions publishing research articles, or organizations presenting comprehensive program information.
To add a Progress Bar to your page, simply drag the module from the module library in the HubSpot page editor and drop it anywhere on your page. The bar will automatically position itself below your site header and remain fixed as visitors scroll. You don’t need to configure any complex settings—the module calculates scroll progress automatically based on your page content.
When to use this module: Progress bars work best on content-heavy pages like blog posts, annual reports, case studies, and educational resources where readers might abandon the page if they’re unsure about the remaining content length. Consider adding this module to your key landing pages, donation stories, or detailed program descriptions where visitor engagement is critical.
The Impact theme’s Progress Bar integrates seamlessly with the theme’s bold design aesthetic. You can customize the bar’s height to make it more or less prominent depending on your page design, and adjust the color to match your organization’s branding through the theme settings. The default styling complements Impact’s typography-focused design without overwhelming your content.
For optimal results, use the Progress Bar on pages longer than three screen heights. On shorter pages, the progress indicator may feel unnecessary and could distract from your call-to-action buttons or donation forms.