Creates a progress bar indicating the scroll percentage of the page.
position: fixed
and a large z-index
value to place the element at the top of the page and above any content.EventTarget.addEventListener()
and Element.scrollTop
to determine the scroll percentage of the document and apply it to the width
of the element.<div id="scroll-progress"></div>
body {
min-height: 200vh;
}
#scroll-progress {
position: fixed;
top: 0;
width: 0%;
height: 4px;
background: #7983ff;
z-index: 10000;
}
const scrollProgress = document.getElementById('scroll-progress');
const height =
document.documentElement.scrollHeight - document.documentElement.clientHeight;
window.addEventListener('scroll', () => {
const scrollTop =
document.body.scrollTop || document.documentElement.scrollTop;
scrollProgress.style.width = `${(scrollTop / height) * 100}%`;
});
CSS, Animation
Creates a rotate effect for the image on hover.
CSS, Animation
Creates a donut spinner that can be used to indicate the loading of content.
CSS, Animation
Creates a staggered animation for the elements of a list.