Scroll Progress Indicator

Scroll ProgressBar Indicator

HTML

  <div id="scrollbar">
    <div id="bar"></div>
  </div>


  <div id="scrollbar-H">
    <div id="barH"></div>
  </div>

SCSS

#scrollbar{
    position: fixed;
    width: 2px;
    height: 90%;
    top: 0;
    left: 20px;
    background-color: rgba(255,255,255,0.2);

    top: 50%;
    transform: translate(0, -50%);
    
    #bar{
        position: relative;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: $color-1;
        border: 1px solid $color-3;
        margin-left: -4px;
        transition: .5s;
    }
}


#scrollbar-H{
    position: fixed;
    width: 90%;
    height: 2px;
    top: 20px;
    left: 20px;
    background-color: rgba(255,255,255,0.2);

    left: 50%;
    transform: translate(-50%, 0);
    
    #barH{
        position: relative;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: $color-1;
        border: 1px solid $color-3;
        margin-top: -4px;
        transition: .5s;
    }
}

JS

window.addEventListener('scroll' , function () {

    let mBarLocation = (window.innerHeight*window.scrollY)/document.body.scrollHeight;
    let Mbar = document.querySelector('#bar')
    Mbar.style.transform = 'translateY('+mBarLocation+'px)';

    let mBarLocationH = (window.innerWidth  *window.scrollY)/document.body.scrollHeight;
    let MbarH = document.querySelector('#barH')
    MbarH.style.transform = 'translateX('+mBarLocationH+'px)';

})

Bootstrap4 theming ep01

Bootstrap4 theming ep02