How to Create a Button With Loading Spinner - HTML & CSS Tutorial For Beginners

In today's video we'll be creating a button using HTML & CSS that features a loading spinner (animation). This is very easy to create, and helps indicate to your end user that something is happening, such as saving a form.

See source code and usage:

Support me on Patreon:

Follow me on Twitter @dcodeyt!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #html #css

[MuhammadIshmaell]

This is by far the easiest spinner I'd ever seen. Thanks a lot and well done!

[kigakiku]

This is far and away the best vid I've seen on the topic. Great job and thank you!

[window.location]

Thats spinner css was simple & easy. Thanks
Tip for others : disable the button when it's loading so use cant click twice

[GasparZumbiehl]

great thanks !! If you set width and height for your button (if you want to have a standard sized button for your website for example) you can set a display none on your text (instead of visibility: hidden), then it allows you to place the spinner in the center using display: flex; on the button itself (justify-content: center and align-items: center), so you don't have to use position: absolute ;)

[boazksp]

Simple fast and to the point, great tutorial !

[KingTMK]

Instead of setting top, right, bottom, and left to 0, you can just do "inset: 0". It's the exact same, but shorter

[veer]

Your knowledge of html and css is unparalleled, blows me away. Great job man

[pratikwadekar]

I find your tutorials very helpful, most of your videos help me to implement such cool use cases to uplift my webpage.

[carlosgomezantelo]

Thanks mate, you fixed a big headache haha

[suyashkumar]

Again I came across a channel which doesn't have subscribers but A quality content

[ickynho]

thanks bro, very explained!! congratulations for this espectacular content! :)

[mathdothings]

Simple and right to the point. Good job!

[StarTeachers]

Thanks so much, Dom! Beautifully explained! You're the expert. Kudos!

[mlab]

Such a magic technique. Great teaching skill

[craigpedersen]

This is very excellent and clear instructions. Thank you for posting this.

[saurabh]

Thank you. You are an excellent tutor.

[nkululekocele]

My perfect definition of you would be " CODING SIMPLIFIED" you are the best in the game🙂

[kabulzhan]

Hello, mate. Fair dinkum, these tutorials are deadly. Thanks.

[rustamthakur]

hi
can you tell me that how to add a customized spinner on the video player, not on the webpage?

[sumanpadhi]

hi, i am creating a dotted circular spinner as soon as i hit the buttom it will load the spinner. how can i achieve that?