SCROLL PROGRESS BAR + BACK TO TOP
by Rehmat (Animated Creativity) - MIT License

Quick install (bar + button on every page):
   <link rel="stylesheet" href="progress.css">
   <script src="progress.js" data-auto></script>

Or place the parts yourself:
   <div class="sp-bar" data-scroll-progress></div>
   <button class="sp-top" data-scroll-top></button>
   <span data-scroll-percent></span>

Options: data-scroll-target="#article"   measure one element instead of the page
         data-scroll-show="400"          button appears after 400 px
         sp-bar--bottom / sp-top--left   other positions
Colours: --sp-color, --sp-height, --sp-track, --sp-ring, --sp-top-bg, --sp-top-color, --sp-size
Extra:   the CSS variable --sp (0 to 1) is set on <html> for your own effects.

Open index.html and scroll.

More free kits and custom work: https://animatedcreativity.com/
