ProgressBar.gif

Gradient Scroll Progress Bar

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 scrolling pages, blog posts or gallery pages - more info on how to do this below.

The values in bold can be changed to suit your branding and site design. 

Where colour values are added, you can use either of the following:

  • Valid colour name e.g. 'red' or 'yellow'
  • Hex value e.g. #FECB2F
  • RGB(a) value e.g. rgb (255,255,255) or rgba (255,255,255,0.8)  - optional opacity value '0.8'
  • HSL(s) value e.g. hsl (0, 0%, 20%) or hsla (0, 0%, 20%, 0.8) optional opacity value '0.8'

If you need help finding colours and building colour palettes - coolors.io is an awesome resource!
 

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='hs-loadingbar-background'></div>
<div id='hs-loadingbar'><span id='hs-loadingbar-cover'></span></div>
<style>
  body{
    margin-top: 4px;
  }
  #hs-loadingbar-background{
    position: fixed;
    z-index: 999998;
    top: 0px;
    left: 0px;
    height: 4px;
    width: 100%;
    background-color: #fafafa;
  }
  #hs-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;
  }
  #hs-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;$("#hs-loadingbar").css("width",d+"%")}$(window).load(function(){o()}),$(window).on("resize",function(){o()}),$(window).scroll(function(n){o()})});
</script>
 

Site wide Code Injection:

 

Individual Page, Blog or Gallery Header Code Injection:

 

⚡️ 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.