How To Create An Advanced Animated Loading Spinner

Loading spinners are incredibly common in web applications, but it is not always easy to create a good looking and simple loading spinner. In this video I will be showing you two different ways to create a loading spinner that both look good and are relatively simple to implement.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/a...
Original Spinner Video: • Animated Loading Spinn...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:55 - HTML
02:16 - Spinner 1
10:46 - Spinner 2
#CSS #WDS #LoadingSpinner

[@raghavsrivastava2910]

Great video Kyle, especially the colour mixing property was amazing.

[@pranayraj8945]

Internet is filled with such html, css tutorials but Kyle watching your explanations are much more clear. Literally, It seems like you can explain anything.

[@maskman4821]

Thank you Kyle for this interesting tutorial, I have learned something new 😍

[@djibrilm__-]

Everytime I visit this channel i feel as if I have never learned anything before

[@karananeja8054]

such a simple yet amazing video!

Amazing tutorial! Thank you Kyle! :)

[@abaddon501]

Great video, thanks a lot ! thanks to you, I understund now how create a simple and nice loading spinner

[@ankitaburman5406]

Omg what did we just learn in 13 mins 🤯🤯Amazing tutorial Kyle ❤️❤️

[@luisrueda4476]

I really liked this one!

[@lucienchu9649]

Amazing, thanks.

[@offroaders123]

Great tutorial! Nice work I thought it could be another nice option to make it with an SVG image as well, I may try that after this!

[@mthaha2735]

Yea

[@ReplayButton_7518]

any external file will make your site slower

[@8bitcomputers_hu]

Köszönjük!

[@geforcesong]

Great Video!!!

[@sjacobxiii]

Great video Kyle. Love the way you explain concepts. Do you know how we would display each sector only a percentage of the circle border? For example sector 1 would be 40%, sector 2 30%, sector 3 20% and sector 4 10%. Like a pie chart.

[@mofe620]

Woww. Thank you so much for this

[@ahmedadela30]

Thank you 😊

[@abel090713]

pointer events blew my mind

[@beinyourguard]

really nice

[@jasperkooij1891]

Great video

[@isaiahsanchevy9252]

Very nice.

[@guangzhouyoukuiinternation6218]

Very Good.

[@lejonjaro7695]

Hey, Kyle. Do you have a tutorial about ChartJS?

[@tusharadhikari1507]

Your style of explaining is awesome Therefore please build some projects using MERN Stack. Thank you in advance.

[@eyaryon5260]

Nice video. But it's possible to get "more" sectors to rotate around spinner-2 with just another border-"area"-color statement for the pseudoelements. Just did it and think it looks good that way. Or is that somehow not a good idea? Am new to this. :D

[@elgunbabayev4741]

Thanks. )

[@talhabinabduljabbar5484]

Hi mate... Ur explanations are going straight into my mind.. Thank you so much All i can say to u is May Allah grant u hidayat ameen

[@aram5642]

I was just curious if you would use 1turn instead 360deg ;)

[@theodorealenas3171]

This hooks me to learn CSS! If I fiddle with such things, will I get general purpose CSS knowledge? Such as simple formatting for a simple web page. Also, should I want to leant CSS? I haven't heard anyone saying they use CSS in their project, but if they use Angular, bootstrap, and so on they bring it up. I don't know if they take CSS for granted or if they actually don't engage with it. Any clue would help, because I need to make use of my time before I'm out of the University. I think. So thank you.

[@rogi9696]

Every front end project has CSS, it could be a pre-processor, a framework, a library.... But it's impossible to escape from that

[@7heMech]

9:16 gave me a scare lol

[@maverick7291]

It would be nice to see a loading bar that is configured to matching the actual time a file take to actually be loaded, and not have a generic time. I haven't seen any KZbinr do that, they all do the same video just in different forms of loading screens.

[@bradleybinho]

This !!

[@kevkevships]

☝☝☝ this

[@Paxters_]

greeting from Polish love ur conent

[@edycole5543]

thank kyle, more react learning

[@binnypaul1708]

Hi, not a programming related question, what hair product do you use? Your hair always perfect. Thanks 😀

[@suryac6743]

Hi Kyle,how to pull a project from GitHub to vs code .Could you please make a video for that.

[@igdev6095]

How can I add border radius for that spinner?

[@Jana-ns5sg]

you're cool!

[@yousafsabir7]

Looks like you are into animations these days

[@QwDragon]

Waiting for conic-gradient to make more sectors in css-only solution?

[@shiyass650]

How do I make the loader go away, when the page loads?

[@parekhnirajj123]

Make video on mern project plz

[@its_code]

WOW 😳 very interesting 😍

[@JacobZigenis]

The video came out 60 seconds ago, there's just no way you already watched it lol.

[@its_code]

@@JacobZigenis no bro I'm already web developer and I just see the code and give the idea and make it by self. It's good practice ...

[@Rust_Rust_Rust]

@@its_code you see the code before watching the whole video? Teach me your ways.

[@its_code]

@@Rust_Rust_Rust I see the hole video 😍. KZbin not sho the exact time

[@mikeonthebox]

On your second spinner you can do more than 2 elements you are not limited to before and after, you can use nth-child(1)::before

[@agatmarwek1614]

Can you provide example how to do it? So far no luck...

[@mikeonthebox]

@@agatmarwek1614 On code pen look at MrAmericanMike/pen/KKoavgG

[@mikeonthebox]

@@agatmarwek1614 I gues it's just an "illusiion" as analizing better whats going on, it's actually selecting the before element itself and not creating a new one, so even when they have 2 colors, they are the same element spinning at same speed. But looks good still.

[@mikeonthebox]

@@agatmarwek1614 Found a solution, 2 extra colors can be attached to the "Loading" div, so that makes it look really fancy.

[@agatmarwek1614]

@@mikeonthebox Great, example from code pen works for me, thank you for help

[@adarshshanbhag2426]

make tutorial about "react spring"

[@Tumz993]

Does anyone know why the border refuses to work when bootstrap is on?

[@PerryCS2]

you wouldn't want to know how I was going to try something like one day... I was going to have a canvas and call draw circle with a bunch of complex math... this is so much cleaner and simpler... lol

[@TheAshokWB]

Road to 1M 🔥

[@yadusolparterre]

Why animate the color of the text if you are just changing the opacity?

[@misterwriter]

Bless you 9:16 9:40

[@thomasloven]

Couldn’t you have three rings by making the div itself one? So you have div, div::before and div::after.

[@mykalimba]

The "Loading" text is in the main div, so I don't think it would work the way you think. I mean, you could probably add a rotating ring section to the main div, but the text inside would also be rotating, I think?

[@thomasloven]

Oh, right! That’s what I get for doing something else while watching. Thanks!

[@anuvabkumarrit4669]

Tried same code not working fine for me

[@hasanulgonisohayeb6323]

I would like to make the same video in Bangla language if you permit me. I must add the link of your video as original source.

[@anipezalt4422]

Hi

[@raphaeltorsu8655]

Bro I need to buy you a car!!

[@itcenter9753]

Ok

[@tommybush7062]

քʀօʍօֆʍ

[@anipezalt4422]

First

[@mikeonthebox]

Thanks a lot, made my own version to have for some future projects. Use nth-child(1)::before to get more elements on the 2nd version.

[@agatmarwek1614]

Can you provide example how to do it? So far no luck...