<div class="menu_top">
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
   <div class="progress_container">
     <div class="cursor"></div>
   </div>
  </div>
  <div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod nunc quis vestibulum cursus. Nam ullamcorper eget magna sed tempus. Nunc tempus urna at augue tristique, vitae dictum massa ullamcorper. Duis luctus massa eget cursus eleifend. Phasellus molestie vulputate tincidunt. Aliquam erat volutpat. Nulla eu nibh eget erat accumsan dignissim. Curabitur luctus libero vitae erat ornare, sed vulputate mi pellentesque. Vivamus convallis dapibus mollis. Duis et lacus ante. Morbi ornare risus in ante vulputate dictum.
</p>
<p>
Fusce vehicula diam dui, tincidunt lobortis nisl vehicula rhoncus. Nulla nec semper leo. Suspendisse tristique posuere egestas. Donec nec feugiat sapien. In hac habitasse platea dictumst. Etiam porta scelerisque sem, in consectetur nunc vestibulum eget. Morbi justo erat, auctor sed ullamcorper a, vestibulum sit amet sapien. Aenean non mi et enim rutrum tristique et vitae tellus.
</p>
<p>
Aliquam mattis sit amet magna non aliquam. Quisque eu sem et diam faucibus dapibus. Donec quam ipsum, ultricies a leo nec, consectetur blandit ligula. Proin ac ultrices sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ullamcorper vitae sapien at pellentesque. Praesent elementum pellentesque mi, eu pretium leo maximus ut. Vestibulum convallis bibendum odio et dictum. Morbi blandit egestas dui in fermentum. Aliquam erat volutpat. Morbi tempus nunc at mauris pretium lacinia. Sed dui sem, ullamcorper nec dapibus a, porttitor eu dui. Etiam fringilla libero sed odio ullamcorper posuere. Etiam scelerisque porta purus, id ultrices erat tempus eu. Duis viverra posuere ex sit amet tempor.
</p>
<p>
Nulla facilisi. Nullam purus ligula, bibendum a lorem sit amet, placerat dignissim eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus vel mauris ligula. Curabitur porta hendrerit ipsum, sit amet euismod neque hendrerit sed. Nulla ut volutpat neque, in suscipit eros. Duis egestas volutpat ante id tempus. Donec nec interdum elit. Duis nec tincidunt est. Mauris sapien urna, lacinia non enim sed, ullamcorper sollicitudin risus. Suspendisse dictum at orci sed tempus. Pellentesque et lacus at lectus sodales accumsan. Phasellus consequat a nunc non faucibus. Sed vel ipsum vel turpis tincidunt sodales ut eu massa. Nam vestibulum malesuada vulputate. In hac habitasse platea dictumst.
</p>
<p>
Sed scelerisque cursus sem ut cursus. Aenean vestibulum leo vel dignissim blandit. Morbi convallis, tortor a efficitur sagittis, erat odio egestas tellus, ut laoreet lectus dui a urna. Ut dapibus turpis dignissim purus auctor porta. Maecenas imperdiet purus sit amet nunc hendrerit imperdiet. Curabitur erat ipsum, fermentum ac felis nec, aliquet porttitor metus. Suspendisse potenti. Nullam vehicula neque libero, eu dapibus tortor hendrerit eu. Phasellus viverra nisi eget ligula scelerisque, nec consectetur orci vestibulum. Nullam a ex at leo auctor tincidunt et nec sem. Curabitur at vestibulum lorem. Curabitur ac gravida ex, ut mollis diam.
</p>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod nunc quis vestibulum cursus. Nam ullamcorper eget magna sed tempus. Nunc tempus urna at augue tristique, vitae dictum massa ullamcorper. Duis luctus massa eget cursus eleifend. Phasellus molestie vulputate tincidunt. Aliquam erat volutpat. Nulla eu nibh eget erat accumsan dignissim. Curabitur luctus libero vitae erat ornare, sed vulputate mi pellentesque. Vivamus convallis dapibus mollis. Duis et lacus ante. Morbi ornare risus in ante vulputate dictum.
</p>
<p>
Fusce vehicula diam dui, tincidunt lobortis nisl vehicula rhoncus. Nulla nec semper leo. Suspendisse tristique posuere egestas. Donec nec feugiat sapien. In hac habitasse platea dictumst. Etiam porta scelerisque sem, in consectetur nunc vestibulum eget. Morbi justo erat, auctor sed ullamcorper a, vestibulum sit amet sapien. Aenean non mi et enim rutrum tristique et vitae tellus.
</p>
<p>
Aliquam mattis sit amet magna non aliquam. Quisque eu sem et diam faucibus dapibus. Donec quam ipsum, ultricies a leo nec, consectetur blandit ligula. Proin ac ultrices sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ullamcorper vitae sapien at pellentesque. Praesent elementum pellentesque mi, eu pretium leo maximus ut. Vestibulum convallis bibendum odio et dictum. Morbi blandit egestas dui in fermentum. Aliquam erat volutpat. Morbi tempus nunc at mauris pretium lacinia. Sed dui sem, ullamcorper nec dapibus a, porttitor eu dui. Etiam fringilla libero sed odio ullamcorper posuere. Etiam scelerisque porta purus, id ultrices erat tempus eu. Duis viverra posuere ex sit amet tempor.
</p>
<p>
Nulla facilisi. Nullam purus ligula, bibendum a lorem sit amet, placerat dignissim eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus vel mauris ligula. Curabitur porta hendrerit ipsum, sit amet euismod neque hendrerit sed. Nulla ut volutpat neque, in suscipit eros. Duis egestas volutpat ante id tempus. Donec nec interdum elit. Duis nec tincidunt est. Mauris sapien urna, lacinia non enim sed, ullamcorper sollicitudin risus. Suspendisse dictum at orci sed tempus. Pellentesque et lacus at lectus sodales accumsan. Phasellus consequat a nunc non faucibus. Sed vel ipsum vel turpis tincidunt sodales ut eu massa. Nam vestibulum malesuada vulputate. In hac habitasse platea dictumst.
</p>
<p>
Sed scelerisque cursus sem ut cursus. Aenean vestibulum leo vel dignissim blandit. Morbi convallis, tortor a efficitur sagittis, erat odio egestas tellus, ut laoreet lectus dui a urna. Ut dapibus turpis dignissim purus auctor porta. Maecenas imperdiet purus sit amet nunc hendrerit imperdiet. Curabitur erat ipsum, fermentum ac felis nec, aliquet porttitor metus. Suspendisse potenti. Nullam vehicula neque libero, eu dapibus tortor hendrerit eu. Phasellus viverra nisi eget ligula scelerisque, nec consectetur orci vestibulum. Nullam a ex at leo auctor tincidunt et nec sem. Curabitur at vestibulum lorem. Curabitur ac gravida ex, ut mollis diam.
</p>
  </div>
<footer>
  <a href="https://josuaowebblog.fr"> Josuao web blog</a>
</footer>
body{
  background: #e2e4ef;
  min-heigth: 100vh;
  font-family: sans-serif;
  margin:0;
  padding: 0
}
.menu_top{
  background: #fff;
  margin-bottom:75px;
  position: fixed;
  top:0;
  width:100%
}
nav{
  display: flex;
  justify-content: end;
}
nav a{
 text-decoration: none;
  color:#061432;
  margin:10px 
}
.progress_container{
  width : 100%;
  height:2px;
  background: #efefef;
}
.cursor{
  height: 2px;
  width: 10%;
  background:#b10f11;
  transition: 0.4s ease-in
}
.content{
  padding-top:75px;
  max-width:600px;
  margin:auto;
  
}
footer{
  width:100%;
  text-align: center;
  background: #2c2c2c;
  padding: 5px 0;
}
footer a{
  
  font-size:0.8rem;
  text-decoration : none;
  color: #efefef;
}
document.addEventListener('scroll', function(){
  let beginScroll = document.documentElement.scrollTop;
  let pageHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  let scrollResult = (beginScroll / pageHeight) * 100;
  document.querySelector('.cursor').style.width = scrollResult + "%"
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.