Creative Page Scroll Progress Bar | CSS3 & Vanilla Javascript

Enroll My Course : Next Level CSS Animation and Hover Effects
------------------
Next Part : Creative Page Scroll Progress Bar with Number Percentage | Html CSS & Vanilla Javascript

Inspired By This : Creative Page Scroll Progress Bar | Html CSS & jQuery
------------------
In this tutorial you will learn how to create a creative page scroll progress bar using css3 and vanilla javascript
------------------
Join Our Channel Membership And Get Source Code Everyday
------------------
Please LIKE our Facebook page for daily updates...

[douglascarvalho]

Man, your tutorials completelly changed my professional life. I was a backend developer with basic HTML, CSS and Javascript knowledge, now, thanks to your tutorials I'm a Full Stack Developer and even got a wage raise. Thank you!

[sanjayn]

Bro, it's working thanks a lot you are helping many people. I am proud that you are an Indian ☺

[waowwaowwaowwaow]

this can go insane with parallax background scrolling :o

[HostDotPromo]

Bro I usually don't like music with tech tutorials but this was awesome

[yousefm]

Why some people give dislike why!
Really thanks online tutorials 😊🖤

[agranshuaggarwal]

Awesome sr really awesome...sr you are the rajnikant off UI u can do anything this...this is the new revolution in UI awesome knowledge u have

[mankybrains]

Thanks for sharing your knowledge. With all the glowing techniques, can make a virtual dance club website now.

[sanskar_gupta]

bhai tum bahut badhiya web designing karte ho i really like your skills.

[I.A.S.]

Thanks for such a wonderful demo and You have the creativity of another level.

[anonim]

Man, this guy awesome!! Thanks bro ım using this for my website.

[prakashto]

Sir I like your all videos but we also need to know which properties need to take for styling and animation. The reason is here as you are in the Web development project you will be able to understand but as a beginner we want to understood those little tips and tricks in handy other than basic properties.

[thomasly]

for anyone looking for a hooks version(definitely not optimised) the JS part can be translated to something like this:
const App = () => {
const [scrollbar, setScrollbar] = React.useState('0%')

React.useEffect(() => {
const listenToScrollEvent = () => {
document.addEventListener('scroll', () => {
const totalHeight = document.body.scrollHeight - window.innerHeight
const progressHeight = ((window.pageYOffset / totalHeight) * 100) + '%'
setScrcollbar(progressHeight)
})
}
listenToScrollEvent()
}, )

return (
<>
<main>
<div id="progressbar" style={ { height: scrollbar } }></div>
<div id="scrollPath"></div>
</main>
</>
)
}

export default App

[momakplayz]

This is really cool, but i would love someone or you to teach my the JavaScript part step by step and what they do because the main reason why we(viewers) go to your channel is to learn something new. Please comment on what each tags and stuff do also i would love a codepen if included in the description.

[shrinivaskangralkar]

Thank you so much 💕
Thank you so much 💕
Thank you so much 💕
Thank you so much 💕
Thank you so much 💕

[benzy_]

Awesome !! It would be more fruitful if you could explain all steps and why you are doing so..
Though very helpful and awesome

[joweltisso]

Thank you for this tutorial, it helped me out.

[shivanshmalik]

Could you PLEASE try to do important points a little slow?
I am not understanding some concepts.

[guccigreatness]

do you have a codepen or github for this because i have a bug in my code and cant figure it out😢

[JuanHernandez]

eres genial amigo hasta para el publico en español