Step progress bar Tutorial, CSS.

Don't miss our on whats new by following us on instagram at @kodhusco .
Make sure to checkout Kodhus UI library: kodhus.com
Demo: kodhus.com/framework/componen...
In this tutorial, you learn how to create a step progress bar fully in CSS and html.
Step progress bar is used in multi step forms and multi step procedures that the start of a step/level is dependent on the previous step to be finished first.
Do not forget to subscribe to the channel to get notified for new cool tutorials.
Happy coding!
Let me know in the comments, if you have any question or feedback.

[@douglasfrb]

Thank you! I've been struggling to create this step progress bar by myself since yesterday and the way you approach this it's just so easy to keep up.

[@tesso.6193]

thanks i've been struggling with this for 2 days but you explained so simply and efficiently it made me wonder how the hell did everyone else complicated it this bad

[@nick_way]

Really clear and helpful - than you so much. The way you make small change and then show us what that does is really helpful for learning css. I've never quite got my head around :before / after etc - your video really helps - thank you :)

[@saidalkharusi7824]

You just helped me with something I've been struggling with for the past 8 or 9 hours. Thanks legend!

[@traviscoons1698]

Said Al Kharusi what programing software is he useong

[@naveenkariyappa]

@@FrontendTips The Link seems to be down

[@naveenkariyappa]

@@FrontendTips kodhus.com/stepprogressbar

[@ricardob6171]

@@FrontendTips 404

[@ricardob6171]

link is down

[@rotrose7531]

Thank you for your great tutorial. Seldom have any tutorials covered css this deeply. Please share your insight even more as to how to make a page dynamic and respond to different contexts.

[@jebo87]

man! this was awesome. I was thinking on how to do something like this for my project and then I found your video with a really clean solution. Thank you!!

[@michaelgibbons7014]

I've been struggling with this for a couple hours, thanks man I appreciate it.

[@michaelgibbons7014]

Not working for me in chrome windows though, think there is a bug with stacking pseudo-elements

[@sadeghkhosroanjam]

Thanks for your time , more please !

[@TomTomDevelopers]

Nice find! I was stuck with some CSS for a while today. Thanks!

[@TheMalni]

Very good tutorial, actually learned a few new things while watching. Thanks a lot!

[@connorhutch2691]

I love how you type on the keyboard xD

[@oOcitizenOo]

Wow, accidentally stumbled on your channel. Useful material here is provided, subbed!

[@AnatolyKhalizev]

Really good style of teaching, thank you!

[@lawrenced5681]

Liked and subscribed for being genuine and informative.
Thanks for the knowledge.

[@PalitoTechnologies]

This is a wonderful series i really love the concept thanks bro.. this video has taken my red button

[@diegofernandonarvaezerazo2844]

Thank you so much!!! It's very useful your tutorial. Greetings from Colombia!!

[@funopedia4968]

Thanks for video.this saved my time working on a project.please uploads more latest tricks and tips videos

[@daylinjones7194]

Saved me so much time! THANK YOUUUU!

[@sijimathew9982]

wow amazing sir. God bless you.

[@emersonbarros7905]

Congratulations guy, wonderful video! helped me a lot.

[@KenzoArts]

You are the best !!! Keep the good work mate

[@boboboboboboo7522]

its am amazing video you are very skilled thank you. If you ever make more videos please make longer ones there is no need to rush I could watch this for hours.

[@FarazAhmedRizwan]

Excellent. Very good tutorial. Understand.Liked dude you're awesome! Thank You...

[@play.dvdagreat]

An advice! You could use Padding to increase the size of the circle from inside and they will be centered too if padding is equal on all the sides. No using Width, Height and Line height just to properly size and align text to the center in the circle. BTW Great video.

[@filipkosic3227]

Quiet nice man keep up the vids i like it now that i can find hard tuts for html and css for free!

[@edd9353]

Thanks a lot! You helped me.

[@usmaniqbal7661]

Oh wow. Thats pretty awesome

[@fazetrenton]

very helpful, thanks!

[@piriyaie]

Thank you very much for this great tutorial

[@josedearaujo163]

Thanks for the tutorial, very helpful

[@surrounded]

Very clear and concise

[@funshofatoye1403]

Really great tutorial....Keep it up

[@mlsmlc]

Dude! I wake up at night in cold sweat having nightmares about your keyboard!
Other than that... Nice tutorial.

[@HalfmoonMY]

Thanks so much for this awesome way of explaining I learned a lot

[@whatsmyname8194]

Thank you, you make it so easy

[@ekeneidiagbor4678]

This content is gold.

[@RodrigoLaramapache]

Thank you so much. I was very helpful.

[@TheRfl360]

Thanks! love this

[@nagautube1]

very helpful, thank you!!

[@jahed2334]

very good video! How do I make the numbering be an actual button that pull outs a new column below that explains for an example step 1 or 2 depending on the number pressed?

[@riddhin5189]

wow !!! this is neat and clean also the simplest way I have ever seen !!! CSS God _/\_

[@Neerajkumar-fv8zx]

Thanks A Lot Sir It Was Really Helpful Thank you so much Please Keep Making These Kinds Of Videos.

[@blackpurple9163]

This was very helpful

[@arminsmajlagic2907]

I love you man!

[@ashishgaikwad]

Thank you buddy. It helps alot

[@aminashraf03]

Very nice. Thanks man

[@parouuu]

Really interesting ! I'll be waiting for more now :)
The keyboard sound is a little bit annoying.

[@dontcare527]

Good work. I was looking for something like this.

[@dontcare527]

I'll check it definitely, thanks :)

[@tigran12]

thank you!! good work

[@lifeisshorts001]

Damn boy, you're killing the keyboard

[@soufianeabid7647]

nice tutorial :D
i love ;D

[@st0neF]

great info, thanks

[@amiralianwar2971]

sir you are great ,Respect from pakistan

[@DeveloperRavi]

really helpful course.....

[@bryanperez4148]

great tutorial thank you

[@kukatech]

on you very first class, you could mentioned how did you set up your browser this way, coding and observing the results on the right simultaneously.

[@jeesantony5001]

good one. you talking very well. like it

[@RapaMusic]

I love the tutorial and the result, thanks! For me it's important though that the progress bar uses up the full width of the available space. How can I achieve this? Maybe something along the lines of "display: flex;" and "justify-content: space-between;"?

[@lounisdu93]

Very good , thanx you !

[@houinatogilles5713]

thanks you much.. it was really helpful

[@strychn9nee]

Cool. As always ..

[@rmjones15]

Great tutorial! Would it be possible to have text on both top and bottom of the progress bar?

[@BayDeveloper]

Be Polite To Your Keyboard :D

[@murkWASD]

+Bay Developer That was my first thought too lol

[@basharmansour3147]

my ears... could not focus because of him smashing the keyboard.

[@vividimaginer]

seems like a useful tut but please stop smashing the enter key or at least move the mic away

[@ZealHriday]

Sun meri baat its his choice

[@ellsonmds5310]

amazing effect

[@rhavisaputra9443]

thank you.., its very helpfull :)

[@tuberman86]

thanks! is there a way to fill the circles with icons instead of numbers?

[@kunamate]

Thanks a lot, I just looking for something like this exactly ! Funny that you made it in 9 mins, and I tried it for 1 hour without success :D

[@kunamate]

Will check them out, thank you :)

[@markemerson98]

haters moaning about sound of keyboard spend far too much time on flat touch screen with no tactile response or sound - ignore them - great tutorial

[@mahfuzsozeeb6609]

nice tutorial

[@mrutyunjayjena2321]

I am interested to know to your tips, which provide a uniq idea to built a form wizard.

[@tarrychang7031]

so amazing...

[@vahnmarty]

Nice tutorial :D although the keyboard thingy, haha.

[@premier69]

Thank You!

[@CormPlays]

hey man great tutorial! What program are you using to code?

[@adsonsouzajesus]

Thank you!

[@youricadet1557]

You're the best

[@claramendezromero3571]

What about further progress on the layout fot every element to be found within trapezoids, like in one of the examples?

[@miformadepensar]

gracias me ayudo a entender mucho mas como hacer los elementos de step...

[@obulorn]

Many thanks

[@pedrobraga9248]

great video, one suggestion if I may. Move mic away from keyboard, typing is very loud at times
when wearing a headphone.

[@penoygaming-arenaofvalor6271]

thank you! :)

[@leratomphahlele1908]

Wonderful video, you got my Like and Sub

[@Mkitra]

That's awesome! But how did you put the icons inside instead of the numbers? Like in the link you provide.

[@SharosetoFitness]

agree

[@andrezorro9010]

For some reason i had to add the counter-reset in the body instead of in .progressbar to make it work, I'll leave the fix
body {
counter-reset: step;
}
thanks for the tutorial!

[@dailynewsmusicandentertain9464]

thank you !!

[@kiran-hh4tq]

Thanks you...searching exactly the same thing.
can u update bit more like onclick button to change clr to green.

[@GuillaumeCurtil]

Hello sir, at first, a very good tutorial, even for french people like me, very understandable. Then i have a question for you, is it possible to put Dates into circle (for exemple one circle with 2015-2016, the other one with 2016-2017), because i have a big problem, with increment ? If you have the answer :).

[@LFRen]

Good, Thinks

[@raghavendrakesari337]

bro i love You Thankyou

[@manojsinghjalal565]

great thanks

[@fabiomarques4455]

Thanks for the great tutorial.
How can I use icons instead of numbers (steps).
Thanks! :-)

[@subhikumari1220]

Seems to be really helpful . But how can we achieve similar functionality wen isntead of circle we have rings and for line we have pipes with grey border . Also wen we are active on current step only inner part of ring is green and outer stroke is white with grey border, and wen we got to next step that whole ring becomes solid green along with pipe.

[@RayanBahadurKhan]

Nice Tutorial. I am sure going to be use it in my coding. BTW, which editor you are using ?

[@claramendezromero3571]

@@FrontendTips could you answer the editor thingy? It'd be very helpful

[@claramendezromero3571]

@@FrontendTips oh, sorry xDDD

[@mubarkshasalehi7460]

We appreciate your hard work and your amazing explanation , my request is that be polite with your keyboard that sounds so annoying regards.

[@mrutyunjayjena2321]

Thanks for wonderful tech..actually i want to do the same but i don't undrstant how to keep peocess by click on next button and appear a form. please make another video which is call form step wizard , its greatful to you....thanks

[@krzysztofkarcz3862]

Amazing! What if I want the line to be green only to the middle?

[@riddhin5189]

please leave comment here if your query is resolved and how did you solve it !

[@AllenMarsam]

thanks!

[@cspdpt3149]

thank you

[@panta5038]

Hey, could you share the source for vertical progress bar thanks!

[@karaljev74]

How can i make "highlighted" all previous state on progress bar ?