Wraparound Scroll Position Progress Bar With jQuery

A wraparound progress bar that automatically updates based on the current scroll position as you scroll down or scroll up the webpage. Built with jQuery and plain HTML/CSS.

How to use it:

1. Create the html for the wrapground progress bar(s).

<div class="progress-top"></div>
<div class="progress-right"></div>
<div class="progress-bottom"></div>
<div class="progress-left"></div>

2. Style the wrapground progress bar(s).

.progress-right,
.progress-bottom,
.progress-left {
  position: fixed;
  z-index: 999;
  background-color: #BF263C;
}

.progress-top,
.progress-bottom {
  height: 0.35em;
}

.progress-right,
.progress-left {
  width: 0.35em;
}

.progress-top,
.progress-right {
  top: 0;
}

.progress-top,
.progress-left {
  left: 0;
}

.progress-bottom,
.progress-left {
  bottom: 0;
}

.progress-bottom,
.progress-right {
  right: 0;
}

3. Import the needed jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>

4. The JavaScript to detect the scroll event & scroll position and update the progress bar on page vertical scrolling.

const ProgressScroll = (() => {
  let s;

  return {
    settings() {
      return {
        top: $('.progress-top'),
        right: $('.progress-right'),
        bottom: $('.progress-bottom'),
        left: $('.progress-left'),
        windowHeight: $(window).height(),
        windowWidth: $(window).width(),
        scrollHeight: $(document).height() - $(window).height(),
        progressTotal: $(window).height() * 2 + $(window).width() * 2,
        scrollPosition: $(document).scrollTop()
      };
    },

    init() {
      s = this.settings();
      this.bindEvents();
    },

    bindEvents() {
      $(window).on('scroll', this.onScroll);
      $(window).on('resize', this.onResize);

      this.progress();
    },

    onScroll() {
      s.scrollPosition = $(document).scrollTop();

      ProgressScroll.requestTick();
    },

    onResize() {
      s.windowHeight = $(window).height();
      s.windowWidth = $(window).width();
      s.scrollHeight = $(document).height() - s.windowHeight;
      s.progressTotal = s.windowHeight * 2 + s.windowWidth * 2;

      ProgressScroll.requestTick();
    },

    requestTick() {
      requestAnimationFrame(this.progress);
    },

    progress() {
      const percentage = s.scrollPosition / s.scrollHeight;
      const width = s.windowWidth / s.progressTotal;
      const height = s.windowHeight / s.progressTotal;

      s.top.css('width', `${(percentage / width) * 100}%`);
      s.right.css('height', `${((percentage - width) / height) * 100}%`);
      s.bottom.css('width', `${((percentage - width - height) / width) * 100}%`);
      s.left.css('height', `${((percentage - width - height - width) / height) * 100}%`);
    }
  };
})();

// Init
$(() => {
  ProgressScroll.init();
});

---

This awesome jQuery plugin is developed by thomasvaeth. For more Advanced Usages, please check the demo page or visit the official website.