Gradient Scroll Bar
Look Demo
Add a gradient scroll bar to the top of the browser when scrolling up and down. This plugin uses code injection and works with all template families.
How To Install
From your Squarespace account, go to Site Code Injection. Copy and paste the code below into the Header Code Injection box.
<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>
Customize
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.
License
This plugin comes with an Unlimited Use License. View License Terms