Gradient Scroll Bar

ezgif-5-5cf0546c397a.gif

Step One

From your Squarespace account, go to Code Injection: Settings > Advanced > Code Injection

Step Two

Copy and paste the code below into the Header Code Injection box.

<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>

Step Three

Change #fafafa to match your site's content background color and both #982bce (left color) & #e527a9 (right color) to the color codes of your choice.

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

Save and refresh the page. 👍

Moov Labs