JSFiddle - React, Tailwind, and code Playground

HTML

<header>
      <h1>
            <div><strong>The</strong></div>
            <div><strong id="space2">Master’s</strong></div>
            <div><strong id="space3">Clock</strong></div>
      </h1>
      <progress id="progressbar" value="0" max="100"></progress>
</header>
   
   
<article></article>

CSS

/* Header */
header{position:fixed;top:0;left:0;width:100%;background:grey}
header h1{display: flex;-ms-flex-flow: row wrap;flex-flow: row wrap}

/* Barre */
progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:3px;color:#000;overflow-y:auto;background-color:#e5e5e5;border-radius:none;box-shadow:none;margin-top:14px}
progress::-moz-progress-bar{background:#000;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
progress::-webkit-progress-value{background:#000;-webkit-appearance:none;appearance:none;}
progress::-webkit-progress-bar{background:#e5e5e5;-webkit-appearance:none;appearance:none;}

/* Hauteur du document pour l'exemple */
article{height:3000px}

JavaScript

$(document).on("scroll", function(){
               var pixels = $(document).scrollTop();
               var pageWidth =  $('header').width() ;
               var pageHeight = $(document).height() - $(window).height();
               var progress = 100 * pixels / pageHeight;
               var progress1 = 100 * pixels / pageHeight;
               var progress2 = 100 * pixels / pageHeight;
               var progress3 = (pageWidth + 100) * pixels / pageHeight  ;
               $("#progressbar").attr('value', progress );
               $("#space1").css('margin-left', progress1 + '%');
               $("#space2").css('margin-left', progress2 + '%');
               $("#space3").css('margin-left', progress3 + '%');
});