Build a Step Progress Bar

No video

Build a Step Progress Bar | JavaScript

Рет қаралды 28,041

Web Dev Made Easy

Күн бұрын

Пікірлер: 69

@lukecagevans8596 3 жыл бұрын

Extremaly good. Simple but efficient.

@DevMadeEasy 3 жыл бұрын

Glad you liked it!

@workoutmusic8848 2 жыл бұрын

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

@punkogo 3 жыл бұрын

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

@DevMadeEasy 3 жыл бұрын

Happy to help

@yolomoco2743 3 жыл бұрын

I love it.♥️ Ur tutorials are amazing ✨

@DevMadeEasy 3 жыл бұрын

Thank you so much!! Welcome to our Tribe.

@goodvibes2853 Жыл бұрын

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!

@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!

@ultronsam1214 2 жыл бұрын

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

@mohammedelhoussni Жыл бұрын

I love it Thank you soo much

@DevMadeEasy Жыл бұрын

I'm glad you like it

@_PhanTuanKiet-yd7oo Жыл бұрын

thanks so much man

@DevMadeEasy Жыл бұрын

Happy to help

@martinheredia1129 2 жыл бұрын

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

@richmondelaigwu2658 Жыл бұрын

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!

@rizalahmad7427 2 жыл бұрын

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

@DevMadeEasy 2 жыл бұрын

So nice of you

@rizalahmad7427 2 жыл бұрын

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

@aitrhamohamed9439 3 жыл бұрын

thank you bro great job

@DevMadeEasy 3 жыл бұрын

Glad it helped

@shegoespostal 3 жыл бұрын

Thank you!

@DevMadeEasy 3 жыл бұрын

You're welcome!

@luisfrontendvue2001 3 жыл бұрын

Nice!

@DevMadeEasy 3 жыл бұрын

Thank you! Cheers!

@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!

@elyisus5788 2 жыл бұрын

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

@DevMadeEasy 2 жыл бұрын

I'm glad you like it. Happy Coding!

@rangabharath4253 3 жыл бұрын

awesome

@DevMadeEasy 3 жыл бұрын

Hey Dev, I'm glad you liked it!

@berriesss 2 жыл бұрын

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 2 жыл бұрын

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

@berriesss 2 жыл бұрын

@@DevMadeEasy suree

@marwamm4057 2 жыл бұрын

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

@raxelpichardo6820 3 жыл бұрын

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 3 жыл бұрын

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 2 жыл бұрын

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

@mohamedyoussef8835 2 жыл бұрын

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

@DevMadeEasy 2 жыл бұрын

Big thanks

@artchristianawitin2555 2 жыл бұрын

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

@DevMadeEasy 2 жыл бұрын

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

@jl1090 3 жыл бұрын

will it mark the steps complete?

@DevMadeEasy 3 жыл бұрын

Hey Dev, yes it will!

@pritimane9523 3 жыл бұрын

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

@DevMadeEasy 3 жыл бұрын

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

@pritimane9523 3 жыл бұрын

@@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.

@erikamanahan8261 3 жыл бұрын

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

@DevMadeEasy 3 жыл бұрын

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

@erikamanahan8261 3 жыл бұрын

@@DevMadeEasy it's the same as your code

@DevMadeEasy 3 жыл бұрын

@@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 3 жыл бұрын

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

@rroba13 2 жыл бұрын

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

@abolfazlarghandehpoor9050 2 жыл бұрын

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

@DevMadeEasy 2 жыл бұрын

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

@abolfazlarghandehpoor9050 2 жыл бұрын

How do I communicate with you?

@DevMadeEasy 2 жыл бұрын

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

@artchristianawitin2555 2 жыл бұрын

Always remain at 1

@DevMadeEasy 3 жыл бұрын

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