feat(ui): add reading progress bar for documentation pages

[Katari-8055]

Summary

This PR adds a reading progress bar at the top of documentation pages to indicate how much of the page has been scrolled. The styles were updated based on feedback to better match the existing UI.

Demo

1_wBMlCBAL.mp4

What kind of change does this PR introduce?

• New feature (non-breaking change)

Did you add tests for your changes?

No, this change only affects the UI.

Does this PR introduce a breaking change?

No.

If relevant, what needs to be documented once your changes are merged?

No additional documentation required.

Use of AI

AI was used only to help refine the PR description.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
webpack-js-org	Ready	Preview, Comment	Mar 12, 2026 7:56pm

[alexander-akait]

Never ignore the PR template, otherwise it will be considered as a AI only generated and closed without any feedback

[alexander-akait]

Styles are bad, they are out of our style and look really bad

[bjohansebas]

regardless of whether it’s AI or not, I’m somewhat against having an indicator showing how much is left to read in an article. It feels a bit out of place with the site’s features.

Besides that, if you still want to add it, I think it can also be done with CSS, without any JavaScript.

[Katari-8055]

regardless of whether it’s AI or not, I’m somewhat against having an indicator showing how much is left to read in an article. It feels a bit out of place with the site’s features.

Besides that, if you still want to add it, I think it can also be done with CSS, without any JavaScript.

Thanks for the feedback!

Regarding the styles, I understand the concern. I will review the existing design patterns used in the documentation and adjust the styling so that it aligns better with the current UI.

Also thanks for the suggestion about implementing it with CSS instead of JavaScript. I’ll try a CSS-based approach to keep the implementation simpler and more lightweight.

If the feature still feels out of place with the current site experience, I’m happy to close the PR as well.

Thanks again for the guidance!

[Katari-8055]

Styles are bad, they are out of our style and look really bad

Thanks for the feedback!

You're right the current styles don't align well with the existing design patterns of the site. I’ll review the existing UI styles and see if I can adjust the implementation to better match them.

If it still doesn't fit well with the current design, I'm happy to close the PR.

[Katari-8055]

@bjohansebas @alexander-akait

Thanks for the feedback!

I've updated the implementation and adjusted the UI to better match the existing design. The progress indicator is now implemented using only CSS, without JavaScript.

Could you please take another look? If this feature still feels out of place for the website, I'm completely fine with closing the PR.

[alexander-akait]

Please use our variables for background or add them to there, magic colors is the worst practice

[alexander-akait]

I don't see the reading progress bar on https://webpack-js-org-git-fork-katari-8055-readingprogressbar-openjs.vercel.app/concepts/

[Katari-8055]

I don't see the reading progress bar on https://webpack-js-org-git-fork-katari-8055-readingprogressbar-openjs.vercel.app/concepts/

Hi, thanks for checking earlier. I’ve made some updates since then. Could you please check again if the reading progress bar is visible on the concepts page now? If it’s still not showing, I’ll investigate further.

[alexander-akait]

Let's use gray color a little bit darker than the panel where we show it