Gradient Scroll Progress Bar

BackToTopButton.gif

Help your visitors know where they are on your site pages with a Gradient Scroll Progress Bar, perfect for longer scrolling pages, blog posts or gallery pages. Below you will find a super-simple tutorial that will guide you through the installation and setup of this plugin.


Step 1: Insert the JavaScript

Insert the following code into the site wide 'Header Code Injection' area or the 'Page Header Code Injection' area to implement this plugin on individual page(s) - more info below.

Copy & paste this code:

  1. Change #fafafa to match your site's content background colour and both #982bce (left colour) & #e527a9 (right colour) to your desired two gradient bar colours.

  2. To change the thickness (height) of your progress bar, replace 4px with the required amount. All 'height' and 'margin-top' values must be exactly the same.

<div id='loadingbar-background'></div> <div id='loadingbar'><span id='loadingbar-cover'></span></div> <style> body{ margin-top: 4px; } #loadingbar-background{ position: fixed; z-index: 999998; top: 0px; left: 0px; height: 4px; width: 100%; background-color: #fafafa; } #loadingbar{ position: fixed; z-index: 999999; top: 0px; left: 0px; height: 4px; background-color: #fafafa; overflow: hidden; -webkit-border-radius: 0 1px 1px 0; border-radius: 0 1px 1px 0; } #loadingbar-cover{ position: absolute; z-index: 9999999; top: 0px; left: 0px; width: 100%; height: 4px; background: #982bce; background: -moz-linear-gradient(left, #982bce 20%, #e527a9 80%); background: -webkit-linear-gradient(left, #982bce 20%, #e527a9 80%); background: linear-gradient(to right, #982bce 20%, #e527a9 80%); -webkit-transition: all .1s ease-in-out !important; -moz-transition: all .1s ease-in-out !important; -o-transition: all .1s ease-in-out !important; transition: all .1s ease-in-out !important; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> $(document).ready(function(){function o(){var o=$(window).scrollTop(),n=$("body").height(),i=$(window).height();console.log(o);var d=o/(n-i)*101;$("#loadingbar").css("width",d+"%")}$(window).load(function(){o()}),$(window).on("resize",function(){o()}),$(window).scroll(function(n){o()})}); </script>

Site wide Code Injection:

sitewide-1.png
sitewide-2.png
sitewide-3.png

Individual Page Header Code Injection:

download.png
header-2.png
header-3.png
header-4.png

 

Step 2: Apply, Save & Refresh! ⚡️

 

Need some help?

If you need help installing your plugin or you find that the code provided is not working - please feel free to contact us by clicking the link below.

Noughts & Ones