How to Enable the Article Reading Progress Bar

SoftwareRoad Knowledge Base can display a reading progress bar on knowledge base articles.

As a visitor scrolls down the page, the bar gradually fills to show how much of the article they have read.

This is most useful on longer guides where visitors may want a quick sense of how far they have left to go.

Enable the reading progress bar

To turn it on:

1. Sign in to your WordPress dashboard.
2. Open Knowledge Base > Settings.
3. Select the Articles or Features tab.
4. Find the Reading Progress Bar option.
5. Enable it.
6. Select Save Changes.
7. Open a published knowledge base article and scroll down the page.

The progress bar should move as you travel through the article.

How the progress bar works

The bar measures how far the visitor has scrolled through the page.

Near the beginning of the article, only a small part of the bar will be filled.

As the visitor moves further down, the filled area increases.

When the bottom of the article is reached, the progress bar should be complete or close to complete.

The visitor does not need to select or interact with the bar.

Where the progress bar appears

The progress bar normally appears along the top of the browser window or article area.

Its position is designed to remain visible while the visitor scrolls.

The exact appearance may vary depending on:

• Your WordPress theme
• The website header
• The article layout
• The colours selected in the plugin
• Whether the WordPress admin bar is visible
• The visitor’s screen size

Check it while signed out of WordPress to see the normal public layout.

Change the progress bar colour

The progress bar colour can be changed from the Design settings.

Open:

Knowledge Base > Settings > Design

Find the reading progress colour option and choose a colour that matches your website branding.

A strong accent colour normally works best because the bar is quite thin.

For example, you could use:

• Your main brand colour
• Your knowledge base link colour
• A contrasting accent colour
• The same colour used for buttons

Make sure the colour remains visible against the website header or page background.

Choose a visible colour

If the bar uses a colour that is too similar to the background behind it, visitors may not notice it.

For example:

• A white bar may disappear against a white header
• A dark navy bar may be hard to see against a dark navigation area
• A pale grey bar may look like part of the theme border

Test the colour on desktop and mobile.

The bar should be noticeable without becoming distracting.

Reading progress bar vs reading time

The reading progress bar and estimated reading time are separate features.

Reading time

Reading time tells the visitor roughly how long the article may take to read.

For example:

6 minute read

Reading progress bar

The progress bar shows how far the visitor has moved through the page.

You can use both features together.

Reading time is shown before the visitor begins, while the progress bar remains useful as they continue through the guide.

When the progress bar is useful

The feature works especially well for:

• Detailed setup guides
• Long troubleshooting articles
• Tutorials with several sections
• Technical documentation
• Articles containing many screenshots
• Guides with a table of contents

It can reassure visitors that they are making progress through a longer article.

Very short articles

A progress bar may be less noticeable on a short article because the visitor can reach the bottom after only a small amount of scrolling.

This is normal.

You can still leave the feature enabled across all articles, or disable it if most of your documentation consists of short answers.

What affects the progress calculation?

The progress bar uses the height of the page and the visitor’s current scroll position.

This means the result can be affected by content such as:

• Images
• Videos
• Tables
• Expandable sections
• Related Articles
• Recommended Articles
• The article sidebar
• The help box
• Website footer content

The bar represents progress through the visible page rather than only counting article words.

Images that load late

If a large image loads after the page has already opened, the page height can change.

This may cause the progress bar to adjust slightly while the visitor is reading.

You can reduce this by:

• Optimising image file sizes
• Using correctly sized images
• Avoiding unnecessarily large screenshots
• Making sure image dimensions are saved correctly
• Using a reliable caching setup

This also improves the general speed of the knowledge base.

Fixed website headers

Some WordPress themes use a fixed or sticky header that remains at the top of the screen.

Check that the progress bar is not:

• Hidden behind the header
• Covering the navigation menu
• Sitting in the wrong position
• Difficult to see against the header colour

Test the page while signed out, as the WordPress admin toolbar can change the visible position.

Progress bar and the WordPress admin toolbar

When you are signed in, WordPress may display an admin toolbar across the top of the website.

This can make the progress bar appear lower than expected or change its position during testing.

Open the article in a private browser window to check how it appears to normal visitors.

Progress bar and the table of contents

The reading progress bar works well alongside an article table of contents.

The table of contents helps visitors jump to a particular section.

The progress bar then shows approximately how far down the article that section is.

Selecting a table of contents link should also update the progress bar as the page moves to the chosen heading.

Progress bar and sidebar content

If an article has a long sidebar, the overall page height may be affected by whichever column is longer.

For example, a sidebar containing many related articles could extend below the end of the article text.

This may mean the progress bar does not appear completely full when the visitor reaches the last paragraph.

If this happens, reduce unnecessary sidebar content or check whether the page continues below the article.

Test the progress bar

After enabling it:

1. Open a published article while signed out.
2. Start at the top of the page.
3. Slowly scroll down.
4. Check that the bar fills smoothly.
5. Jump to a heading using the table of contents.
6. Continue to the bottom of the article.
7. Check the article on mobile.

Repeat the test using both a short article and a longer guide.

The progress bar is not showing

If the bar is missing, check that:

• The Reading Progress Bar option is enabled
• The settings were saved
• You are viewing a SoftwareRoad Knowledge Base article
• The article is published
• Your SoftwareRoad Knowledge Base licence is active
• The progress colour is visible
• The website cache has been cleared

Try opening a longer article in a private browser window.

The bar is present but hard to see

Open:

Knowledge Base > Settings > Design

Choose a stronger progress bar colour.

Also check whether:

• The website header uses a similar colour
• The bar is hidden behind another element
• A custom theme style is covering it
• The bar is extremely thin on your display
• A browser extension is changing the page design

Use a clearly contrasting colour while testing.

The bar does not move

If the bar stays in one position:

1. Reload the page.
2. Clear the WordPress cache.
3. Test while signed out.
4. Temporarily disable page optimisation that delays scripts.
5. Check the browser console for JavaScript errors.
6. Test using a standard WordPress theme if needed.

The feature requires JavaScript to track the visitor’s scroll position.

A script error elsewhere on the page may stop it from updating.

The bar jumps instead of moving smoothly

Small jumps can happen while images, videos or other content are loading.

To improve this:

• Compress large images
• Avoid loading oversized screenshots
• Reduce content that changes height after the page opens
• Check lazy-loading settings
• Clear optimisation caches
• Test without script delay settings

A small amount of movement while the page loads is normal.

The bar never reaches the end

The page may continue below the article because of:

• Related Articles
• Recommended Articles
• A help box
• A long sidebar
• Comments
• Theme footer content
• Additional widgets

Scroll to the actual bottom of the page and check again.

If the article content ends well before the page itself, the progress bar may still have some distance left.

The bar reaches the end too early

This can happen if content is loaded after the initial page height has been calculated.

Check for:

• Embedded videos
• Delayed images
• Expandable sections
• Dynamically loaded article lists
• Third-party page elements

Reload the article after everything has loaded and test again.

The bar overlaps the website menu

A sticky theme header may use the same position as the progress bar.

Try the following:

• Check the knowledge base progress bar settings
• Check your theme’s sticky header settings
• Clear cached CSS
• Test while signed out
• Temporarily disable the sticky header
• Check for custom CSS affecting fixed elements

The progress bar should not block navigation links or menu buttons.

The progress bar is missing on mobile

Check that:

• The feature is enabled globally
• The progress colour is visible on the mobile header
• The theme is not hiding fixed elements on small screens
• Mobile optimisation has not removed the required script
• The page cache has been cleared

Test in more than one mobile browser where possible.

The article scrolls sideways on mobile

The progress bar itself should not make the page wider.

Horizontal scrolling is more likely to be caused by:

• Oversized images
• Wide tables
• Code blocks
• Long URLs
• Custom CSS
• Embedded content

Check the article content and reduce anything extending beyond the screen width.

Should you enable the progress bar?

Enable it when your articles are detailed enough for visitors to benefit from a visual progress indicator.

It is a good fit for documentation containing:

• Long instructions
• Several headings
• Detailed screenshots
• Multiple troubleshooting sections

You may prefer to leave it disabled if most articles are very short or if your website already uses another reading progress feature.

Avoid duplicate progress bars

Your WordPress theme or another website feature may already display a reading progress bar.

Showing two progress bars can be confusing.

If another one is already active, choose the version you prefer and disable the duplicate.

The SoftwareRoad Knowledge Base progress bar is designed specifically for its article pages.

Reading progress checklist

Before finishing, check that:

• The progress bar is enabled
• The selected colour is easy to see
• It appears on published knowledge base articles
• It moves while the visitor scrolls
• It works with the table of contents
• It is not hidden behind a sticky header
• It does not overlap the website menu
• It behaves correctly while signed out
• It works on desktop and mobile
• No duplicate progress bar is displayed

The reading progress bar is now ready to help visitors see how far they have moved through each guide.