Простой скрипт прогресса прокрутки страницы на JS

Если Вы хотите добавить на свой сайт интересный скрипт прогресса прокрутки страницы с градиентом, то присмотритесь к следующему скрипту...

DEMO

JS:

//Thanks https://medium.com/@nilayvishwakarma/build-a-scroll-progress-bar-with-vanilla-js-in-10-minutes-or-less-4ba07e2554f3
const d=document;
const zaq={};
zaq.d=d.createElement("div");
zaq.d.classList.add("pf","z3","scrpr");
zaq.d.innerHTML=`<div class="an scrlPrg"></div>`;
d.body.appendChild(zaq.d);
window.addEventListener("scroll",()=>{
 zaq.scrollTop =
 d.documentElement["scrollTop"] || d.body["scrollTop"];
 zaq.scrollBottom =
 (d.documentElement["scrollHeight"] ||
 d.body["scrollHeight"]) - d.documentElement.clientHeight;
 zaq.prg=100 - Math.round(zaq.scrollTop / zaq.scrollBottom * 100);
 d.querySelector(".scrlPrg").setAttribute("style","transform:translateX(-"+zaq.prg+ "%)");
},{ passive: true }
);
delete (zaq);

CSS:

.pf{position:fixed}
.z3{z-index:3}
.an{transition:all .35s}
.scrpr{top:0;right:0;left:0;height:.75rem}
.scrlPrg{position:absolute;top:0;right:0;bottom:0;left:0;background:#856ef3;transform:translatex(-100%);
 background:
 linear-gradient(135deg, hsla(210.07, 98.18%, 47.28%, 1) 0%, hsla(210.07, 98.18%, 47.28%, 0) 70%),
 linear-gradient(25deg, hsla(90.06, 91.3%, 43.58%, 1) 10%, hsla(90.06, 91.3%, 43.58%, 0) 80%),
 linear-gradient(315deg, hsla(312.93, 97.53%, 49.93%, 1) 15%, hsla(312.93, 97.53%, 49.93%, 0) 80%),
 linear-gradient(245deg, hsla(199.08, 91.98%, 46.31%, 1) 100%, hsla(199.08, 91.98%, 46.31%, 0) 70%);
}

HTML:

нет.