title: 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
body: <p>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</p>
  <p>Header.js</p>
  <pre><code>&lt;header&gt;
  &lt;ProgressBar /&gt;
  &lt;/header&gt;
  </code></pre>
  <p>and the sections are in the main</p>
  <p>MainContent.js</p>
  <pre><code>&lt;main&gt;
  &lt;section&gt;&lt;/section&gt;
  &lt;/main&gt;
  </code></pre>
  <p>Layout.js</p>
  <pre><code>&lt;Header /&gt;
  &lt;Sections /&gt;
  &lt;Footer /&gt;
  </code></pre>