Wraparound Scroll Position Progress Bar With jQuery
File Size: | 2.11 KB |
---|---|
Views Total: | 1292 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.