<body>
<div id="progressbar"></div>
<div id="scrollPath"></div>
</body>
<style>
*::-webkit-scrollbar {
width: 0px;
}
@media screen and (min-width: 768px){
#scrollPath {
position:fixed;
top:0;
right:0;
width:6px;
height:100%;
background:rgba(50, 50, 50, 0.5);
border-left:1px solid rgba(50, 50, 50, 1);
z-index:-1;
}
#progressbar {
position:fixed;
top:0;
right:0;
width:6px;
background: var(--e-global-color-primary);
z-index:1;
}
#progressbar:before {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:var(--e-global-color-primary);
}
#progressbar:after {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:var(--e-global-color-primary);
}
}
</style>
<script type="text/javascript">
let progress = document.getElementById('progressbar');
let totalHeight = document.body.scrollHeight - window.innerHeight;
window.onscroll = function(){
let progressHeight = (window.pageYOffset / totalHeight) * 100;
progress.style.height = progressHeight + "%";
}
</script>
