CSS Progress Bar Tutorial

🚨 IMPORTANT:

In this video I am going to walk you through the process of building a progress bar in CSS that can be configured in both HTML and JavaScript. We will be using modern and unique CSS tricks to make the progress bar easy to work with in both JavaScript and HTML.

Code For This Tutorial:

Code Pen For This Tutorial:

Twitter:

GitHub:

CodePen:

#ProgressBar #WebDevelopment #CSSTutorial

[Mostafaabobakr]

simple
to the point
`please don't ever change these two`

[danielcir]

Everything makes sense when you type the code, Kyle, everything!!!! There's so much learning watching your tutorials!!! Thank you for all the videos you've been posting!!! Eternally greatful.

[AlexTechie]

Damn, dude: 36k subs! I remember when you were at around 1k subs. Congratulations on all your hard work, you've earned it! What sets you apart from the rest is that you explain the syntax, why it's needed, and then show live updates of what it does. Other popular YouTubers don't do that, so you have real potential to surpass them. Keep it up!

[davi_singh]

Would love to see the same tutorial with the <progress> tag instead of the divs

[justadam]

simple, straight forward, easy. you deserve 5million subscribers

[santhoshyerraganti]

Nice, Thanks for sharing knowledge.
Though the div width will not overflow, but still setInterval() keep on invoke even though width is greater than max-width. Clearing the setInterval when width is >= 100 will fix this as well.

[master]

8:05 Wow didn't know that you can change variables inside the style atrr. Thanks mate.

[techease]

How the loading can be repeated again from beginning??..

[narendranj]

How do we do this progress bar with percentage like instead of loading.... It should calculate with percentage eg: 50% 100 %

[imadev]

Thanks dude!, amazing video, as always. How ever I'm wondering if it would have been important to mention the interval clearing.

[husseinalrubaidi]

thank you so much! i would love to know how to make the same for more than one element

[gromswift]

I think there are better ways to interact with the progress bar through JS. But totaly it was a nice video, thx!

[sumdev]

I have learned so much from Web Dev Simplified I feel like I should pay you a commission from my salary 🤣

[arlaort]

Hi. what is the modification in javascript code for this progress bar for show upload file progress?

[NedumEze]

How could you come up with this idea? Amazing! Thanks for sharing, Buddy.

[raymytech]

How to add texts at intervals on percentages

[sachinbade]

How to create progress when actually data from database...it will take time at that time which type of changes or modifications in this code ... please guide for this issue....

[ruslanstupak]

Hi, could you tell me please, how we can use this rule style="--width:10" in React, because it actualy does not work

[UrsWellWisher]

What should we do in the code to run the loading continuously

[Hans_Bauer]

When I have more than one progress bar why can't I just change to Will I need a for-loop to iterate through the classes?