Create scroll indicator with Metro 4 Progress component

Hello, my friends!

In this post, I want to show how easy it is to create a scroll indicator in Metro 4 using the progress component.

CSS

.indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

HTML

<div class="indicator" data-role="progress"></div>

JavaScript

function indicator(){
    var container = document.documentElement;
    var scrolled = (container.scrollTop / (container.scrollHeight - container.clientHeight)) * 100;

    var pb = Metro.getPlugin(".indicator", 'progress');
    pb.val(scrolled);
}

$(window).on('scroll', function(){
    indicator()
})

indicator();