how can we implement a progress bar on a global level that does not connect with the pages but makes progress as we go through the sections

I am trying to implement a progress bar that stays in the header and it's progress needs to be updated as we go through each section of the page. I am using a react-bootstrap progress bar and react-redux

Header.js

<header>
<ProgressBar />
</header>

and the sections are in the main

MainContent.js

<main>
<section></section>
</main>

Layout.js

<Header />
<Sections />
<Footer />