How To Create An Advanced Animated Loading Spinner

  Рет қаралды 46,223

Web Dev Simplified

Web Dev Simplified

Күн бұрын

Пікірлер: 66
@pranayraj8945
@pranayraj8945 2 жыл бұрын
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.
@8bitcomputers_hu
@8bitcomputers_hu 2 жыл бұрын
Köszönjük!
@raghavsrivastava2910
@raghavsrivastava2910 2 жыл бұрын
Great video Kyle, especially the colour mixing property was amazing.
@maskman4821
@maskman4821 2 жыл бұрын
Thank you Kyle for this interesting tutorial, I have learned something new 😍
@ankitaburman5406
@ankitaburman5406 2 жыл бұрын
Omg what did we just learn in 13 mins 🤯🤯Amazing tutorial Kyle ❤️❤️
@karananeja8054
@karananeja8054 2 жыл бұрын
such a simple yet amazing video!
@lejonjaro7695
@lejonjaro7695 2 жыл бұрын
Hey, Kyle. Do you have a tutorial about ChartJS?
@abaddon501
@abaddon501 2 жыл бұрын
Great video, thanks a lot ! thanks to you, I understund now how create a simple and nice loading spinner
@offroaders123
@offroaders123 2 жыл бұрын
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
@mthaha2735 2 жыл бұрын
Yea
@ReplayButton_7518
@ReplayButton_7518 Жыл бұрын
any external file will make your site slower
2 жыл бұрын
Amazing tutorial! Thank you Kyle! :)
@abel090713
@abel090713 2 жыл бұрын
pointer events blew my mind
@eyaryon5260
@eyaryon5260 2 жыл бұрын
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
@aram5642
@aram5642 2 жыл бұрын
I was just curious if you would use 1turn instead 360deg ;)
@ahmedadela30
@ahmedadela30 2 жыл бұрын
Thank you 😊
@7heMech
@7heMech 2 жыл бұрын
9:16 gave me a scare lol
@sjacobxiii
@sjacobxiii 2 жыл бұрын
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.
@luisrueda4476
@luisrueda4476 2 жыл бұрын
I really liked this one!
@djibrilm__-
@djibrilm__- 2 жыл бұрын
Everytime I visit this channel i feel as if I have never learned anything before
@lucienchu9649
@lucienchu9649 2 жыл бұрын
Amazing, thanks.
@mofe620
@mofe620 2 жыл бұрын
Woww. Thank you so much for this
@geforcesong
@geforcesong 2 жыл бұрын
Great Video!!!
@Paxters_
@Paxters_ 2 жыл бұрын
greeting from Polish love ur conent
@misterwriter
@misterwriter 2 жыл бұрын
Bless you 9:16 9:40
@binnypaul1708
@binnypaul1708 2 жыл бұрын
Hi, not a programming related question, what hair product do you use? Your hair always perfect. Thanks 😀
@guangzhouyoukuiinternation6218
@guangzhouyoukuiinternation6218 Жыл бұрын
Very Good.
@suryac6743
@suryac6743 2 жыл бұрын
Hi Kyle,how to pull a project from GitHub to vs code .Could you please make a video for that.
@jasperkooij1891
@jasperkooij1891 2 жыл бұрын
Great video
@theodorealenas3171
@theodorealenas3171 2 жыл бұрын
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
@rogi9696 2 жыл бұрын
Every front end project has CSS, it could be a pre-processor, a framework, a library.... But it's impossible to escape from that
@talhabinabduljabbar5484
@talhabinabduljabbar5484 2 жыл бұрын
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
@edycole5543
@edycole5543 2 жыл бұрын
thank kyle, more react learning
@tusharadhikari1507
@tusharadhikari1507 2 жыл бұрын
Your style of explaining is awesome Therefore please build some projects using MERN Stack. Thank you in advance.
@isaiahsanchevy9252
@isaiahsanchevy9252 2 жыл бұрын
Very nice.
@igdev6095
@igdev6095 2 жыл бұрын
How can I add border radius for that spinner?
@QwDragon
@QwDragon 2 жыл бұрын
Waiting for conic-gradient to make more sectors in css-only solution?
@beinyourguard
@beinyourguard 2 жыл бұрын
really nice
@shiyass650
@shiyass650 2 жыл бұрын
How do I make the loader go away, when the page loads?
@parekhnirajj123
@parekhnirajj123 2 жыл бұрын
Make video on mern project plz
@adarshshanbhag2426
@adarshshanbhag2426 2 жыл бұрын
make tutorial about "react spring"
@elgunbabayev4741
@elgunbabayev4741 2 жыл бұрын
Thanks. )
@Tumz993
@Tumz993 2 жыл бұрын
Does anyone know why the border refuses to work when bootstrap is on?
@Jana-ns5sg
@Jana-ns5sg 2 жыл бұрын
you're cool!
@yadusolparterre
@yadusolparterre 2 жыл бұрын
Why animate the color of the text if you are just changing the opacity?
@maverick7291
@maverick7291 2 жыл бұрын
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
@bradleybinho 2 жыл бұрын
This !!
@kevkevships
@kevkevships 2 жыл бұрын
☝☝☝ this
@PerryCS2
@PerryCS2 2 жыл бұрын
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
@thomasloven
@thomasloven 2 жыл бұрын
Couldn’t you have three rings by making the div itself one? So you have div, div::before and div::after.
@mykalimba
@mykalimba 2 жыл бұрын
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
@thomasloven 2 жыл бұрын
Oh, right! That’s what I get for doing something else while watching. Thanks!
@anuvabkumarrit4669
@anuvabkumarrit4669 2 жыл бұрын
Tried same code not working fine for me
@yousafsabir7
@yousafsabir7 2 жыл бұрын
Looks like you are into animations these days
@its_code
@its_code 2 жыл бұрын
WOW 😳 very interesting 😍
@JacobZigenis
@JacobZigenis 2 жыл бұрын
The video came out 60 seconds ago, there's just no way you already watched it lol.
@its_code
@its_code 2 жыл бұрын
@@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
@Rust_Rust_Rust 2 жыл бұрын
@@its_code you see the code before watching the whole video? Teach me your ways.
@its_code
@its_code 2 жыл бұрын
@@Rust_Rust_Rust I see the hole video 😍. KZbin not sho the exact time
@hasanulgonisohayeb6323
@hasanulgonisohayeb6323 2 жыл бұрын
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
@anipezalt4422 2 жыл бұрын
Hi
@TheAshokWB
@TheAshokWB 2 жыл бұрын
Road to 1M 🔥
@itcenter9753
@itcenter9753 2 жыл бұрын
Ok
@tommybush7062
@tommybush7062 2 жыл бұрын
քʀօʍօֆʍ
@raphaeltorsu8655
@raphaeltorsu8655 2 жыл бұрын
Bro I need to buy you a car!!
@anipezalt4422
@anipezalt4422 2 жыл бұрын
First
Can I Create Online Tutorial’s Magic CSS Indicator?
1:04:16
Web Dev Simplified
Рет қаралды 93 М.
How To Limit Lines Of Text With CSS Only
11:53
Web Dev Simplified
Рет қаралды 116 М.
Мама у нас строгая
00:20
VAVAN
Рет қаралды 12 МЛН
Deadpool family by Tsuriki Show
00:12
Tsuriki Show
Рет қаралды 6 МЛН
Beat Ronaldo, Win $1,000,000
22:45
MrBeast
Рет қаралды 115 МЛН
Creating a CSS-only directionally aware button
17:28
Kevin Powell
Рет қаралды 67 М.
Complex SVG Animations Made Simple with JavaScript
22:04
DesignCourse
Рет қаралды 74 М.
How To Create This Advanced Credit Card Form With CSS/JavaScript
51:55
Web Dev Simplified
Рет қаралды 45 М.
How to Animate Graphics in iMovie
7:06
Louise Henry
Рет қаралды 615 М.
Use Spinner and Create Page Loader in Bootstrap 5
8:23
ByteGrad
Рет қаралды 18 М.
Can I Create This Tricky Animated CSS Review Card?
1:13:37
Web Dev Simplified
Рет қаралды 39 М.
This Simple Trick Makes Your Website 83% Better Looking
10:57
Web Dev Simplified
Рет қаралды 398 М.