Build a Step Progress Bar | JavaScript

[@lukecagevans8596]

Extremaly good. Simple but efficient.

[@DevMadeEasy]

Glad you liked it!

[@DevMadeEasy]

If you find this video helpful, give it a like as this would help it reach even more people! Also, subscribe if you haven't ! Thank you! 🙏 👉 Source Code Available Here: 🌱devmadeeasy.gumroad.com/l/buildstepprogressbar

[@ObrayanAcosta]

agradecido por tu contenido!!, felicidades!!

[@DevMadeEasy]

¡Muchas gracias por tus amables palabras y por tu aprecio hacia mi contenido! Me alegra saber que has encontrado útil la información que he proporcionado. ¡Bienvenido a esta comunidad donde podemos aprender y compartir juntos! Si tienes alguna pregunta o necesitas ayuda en cualquier otro tema, no dudes en preguntar. Estoy aquí para ayudarte en lo que necesites. ¡Espero seguir brindándote información valiosa y ser de utilidad en tus futuras consultas! ¡Gracias nuevamente y bienvenido!

[@yolomoco2743]

I love it.♥️ Ur tutorials are amazing ✨

[@DevMadeEasy]

Thank you so much!! Welcome to our Tribe.

[@Paulo280713]

thanks a lot, helped me sooo much

[@DevMadeEasy]

Glad it helped!

[@ericchen115]

Thank you sir, that's great and useful~👍

[@DevMadeEasy]

Hello Web Warrior, I am glad you liked it. Welcome to our Tribe. As always: Happy Coding!

[@punkogo]

thank you so much you're amazing, like and shared with others developers

[@DevMadeEasy]

Happy to help

[@ultronsam1214]

Can you please explain the minus 1 on the actives, and circles'(.length)?

[@workoutmusic8848]

Fir thes folks who will have problem with active circle, in HTML he made mistake and set active class to all elements, you need put it on just first. I suppose that he do this to sub to patreon and find results of the problem

[@kareemhussain1740]

Yeah me too... it took me nearly 2 hours to figure it out even though my code was all clear ...he is clearly doing it for patreon or maybe he forgot, whatever the reason I'm not watching anymore video of this channel

[@_PhanTuanKiet-yd7oo]

thanks so much man

[@DevMadeEasy]

Happy to help

[@mohammedelhoussni]

I love it Thank you soo much

[@DevMadeEasy]

I'm glad you like it

[@martinheredia1129]

how can add stop if validation don't work? or step not changed?

[@rizalahmad7427]

Waoww bro.. Thank you.. ! So nice your video

[@DevMadeEasy]

So nice of you

[@rizalahmad7427]

@@DevMadeEasy can't wait for interesting videos from you

[@shegoespostal]

Thank you!

[@DevMadeEasy]

You're welcome!

[@OfAllTime09876wer]

how are your files connected?

[@DevMadeEasy]

Hello Web Warrior, how are you doing? Well, I connnect those lines through JavaScript and I show it visually using css. Happy Coding!

[@ericarellano217]

I don’t understand why the pseudo element before is on progress container …can you elaborate on that please …why wouldn’t it make sense as progress::before instead!

[@DevMadeEasy]

Hello Web Warrior! the ::before pseudo-element is added to the .progress-container class instead of the .progress class. This is because the .progress-container class represents the container that holds the progress bar, while the .progress class represents the progress bar itself. Adding the ::before pseudo-element to the .progress-container class ensures that the progress bar background color fills up the entire container, rather than just the progress bar itself. Happy Coding my friend!

[@aitrhamohamed9439]

thank you bro great job

[@DevMadeEasy]

Glad it helped

[@inspirehub-rich]

You should have hosted the code... so that i will just copy I have liked and subscribed

[@DevMadeEasy]

That's a good idea, thanks! Happy Coding my new friend!

[@luisfrontendvue2001]

Nice!

[@DevMadeEasy]

Thank you! Cheers!

[@pritimane9523]

Can u help me with this same vertical using scroll effect?

[@DevMadeEasy]

Yeah, sure, I can make a video on that, tell me what you have in mind!

[@pritimane9523]

@@DevMadeEasy i want this same progressbar vertically. For e.g i have 3 column in 1st colum vertical step progressbar. In 2nd content and 3rrd column images which are scrollable when we click on next step but without any NEXT button.

[@raxelpichardo6820]

extremely cool, but I have a problem, my bar when I put the display flex in the class "progress-container" does not change to horizontal, it remains vertical, could you help me please? thanks in advance

[@DevMadeEasy]

Hello Dev, how are you doing? Can you please send us your code so we can check it out? We will be happy to help !

[@marwamm4057]

it happened to me too. add flex-direction: row;

[@berriesss]

the circle.active in my CSS, all circles, not just the first, will have a color. I've double-checked the code, but it's the same as yours. So, what am I supposed to do now?

[@DevMadeEasy]

Hey DEV, please show your code, can you do that using "CodePen"? 99% of the time is a typo somewhere! Let me know!!!

[@berriesss]

@@DevMadeEasy suree

[@marwamm4057]

@@berriesss the first element in html file only should be called as class = circle active others should be called as circle only.

[@elyisus5788]

💪💪💪💪💪 thanks!!!!!!!!!

[@DevMadeEasy]

I'm glad you like it. Happy Coding!

[@abolfazlarghandehpoor9050]

Hi master a question : Why don't I active everything I do

[@DevMadeEasy]

Hey Dev, share your code with us! Let me know what you have in mind. Happy Coding my friend!

[@abolfazlarghandehpoor9050]

How do I communicate with you?

[@DevMadeEasy]

@@abolfazlarghandehpoor9050 Hey dev, you can send me a msg on my FB Page. Happy Coding!

[@erikamanahan8261]

The .circle.active on my css makes all of circle has color not the first one only. What should i do?

[@DevMadeEasy]

Hey DEV, how are you doing? Please show us you code, so we can help you out!

[@erikamanahan8261]

@@DevMadeEasy it's the same as your code

[@DevMadeEasy]

@@erikamanahan8261 Hey Dev, I believe it's a typo somewhere, believe me... Sometimes, especially when tired, we are sure that our code is perfect, then we take a break and when we go back to the code, we clearly see the typo. To save you time, show us your code (you can use CODEPEN) and we can help you!

[@oscp2620]

@@DevMadeEasy Hello i have the same problem as Erika, however my code is the same as yours 😅

[@rroba13]

En el html solo el primer div va con active, los demás no

[@rangabharath4253]

awesome

[@DevMadeEasy]

Hey Dev, I'm glad you liked it!

[@mohamedyoussef8835]

Awesome video +++++++++++++++++++++++++++

[@DevMadeEasy]

Big thanks

[@jl1090]

will it mark the steps complete?

[@DevMadeEasy]

Hey Dev, yes it will!

[@artchristianawitin2555]

It doesn't move when I click next to the new html file

[@DevMadeEasy]

Hey DEV, can you please show us your code via Codepen; this way we can help you out! Happy Coding!

[@artchristianawitin2555]

Always remain at 1