How To Create An Advanced Animated Loading Spinner

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 ธ.ค. 2024

ความคิดเห็น • 66

  • @pranayraj8945
    @pranayraj8945 2 ปีที่แล้ว +1

    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.

  • @raghavsrivastava2910
    @raghavsrivastava2910 2 ปีที่แล้ว +6

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

  • @djibrilm__-
    @djibrilm__- 2 ปีที่แล้ว +2

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

  • @8bitcomputers_hu
    @8bitcomputers_hu 2 ปีที่แล้ว +2

    Köszönjük!

  • @ankitaburman5406
    @ankitaburman5406 2 ปีที่แล้ว

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

  • @maskman4821
    @maskman4821 2 ปีที่แล้ว +6

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

  • @karananeja8054
    @karananeja8054 2 ปีที่แล้ว

    such a simple yet amazing video!

  • @abaddon501
    @abaddon501 2 ปีที่แล้ว

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

  • @abel090713
    @abel090713 2 ปีที่แล้ว

    pointer events blew my mind

  • @offroaders123
    @offroaders123 2 ปีที่แล้ว +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!

  • @lejonjaro7695
    @lejonjaro7695 2 ปีที่แล้ว +2

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

  • @Paxters_
    @Paxters_ 2 ปีที่แล้ว

    greeting from Polish love ur conent

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

  •  2 ปีที่แล้ว

    Amazing tutorial! Thank you Kyle! :)

  • @aram5642
    @aram5642 2 ปีที่แล้ว +2

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

  • @eyaryon5260
    @eyaryon5260 2 ปีที่แล้ว +1

    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

  • @ahmedadela30
    @ahmedadela30 2 ปีที่แล้ว

    Thank you 😊

  • @luisrueda4476
    @luisrueda4476 2 ปีที่แล้ว

    I really liked this one!

  • @geforcesong
    @geforcesong 2 ปีที่แล้ว

    Great Video!!!

  • @mofe620
    @mofe620 2 ปีที่แล้ว

    Woww. Thank you so much for this

  • @jasperkooij1891
    @jasperkooij1891 2 ปีที่แล้ว

    Great video

  • @tusharadhikari1507
    @tusharadhikari1507 2 ปีที่แล้ว

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

  • @7heMech
    @7heMech 2 ปีที่แล้ว +1

    9:16 gave me a scare lol

  • @lucienchu9649
    @lucienchu9649 2 ปีที่แล้ว

    Amazing, thanks.

  • @edycole5543
    @edycole5543 2 ปีที่แล้ว

    thank kyle, more react learning

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

  • @shiyass650
    @shiyass650 2 ปีที่แล้ว

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

  • @igdev6095
    @igdev6095 2 ปีที่แล้ว

    How can I add border radius for that spinner?

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

  • @QwDragon
    @QwDragon 2 ปีที่แล้ว

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

  • @Tumz993
    @Tumz993 2 ปีที่แล้ว

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

  • @maverick7291
    @maverick7291 2 ปีที่แล้ว +5

    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 TH-camr do that, they all do the same video just in different forms of loading screens.

  • @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 ปีที่แล้ว +1

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

  • @isaiahsanchevy9252
    @isaiahsanchevy9252 2 ปีที่แล้ว

    Very nice.

  • @yadusolparterre
    @yadusolparterre 2 ปีที่แล้ว

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

  • @misterwriter
    @misterwriter 2 ปีที่แล้ว

    Bless you 9:16 9:40

  • @yousafsabir7
    @yousafsabir7 2 ปีที่แล้ว

    Looks like you are into animations these days

  • @beinyourguard
    @beinyourguard 2 ปีที่แล้ว

    really nice

  • @adarshshanbhag2426
    @adarshshanbhag2426 2 ปีที่แล้ว

    make tutorial about "react spring"

  • @parekhnirajj123
    @parekhnirajj123 2 ปีที่แล้ว

    Make video on mern project plz

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

  • @TheAshokWB
    @TheAshokWB 2 ปีที่แล้ว

    Road to 1M 🔥

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

  • @elgunbabayev4741
    @elgunbabayev4741 2 ปีที่แล้ว

    Thanks. )

  • @its_code
    @its_code 2 ปีที่แล้ว +1

    WOW 😳 very interesting 😍

    • @JacobZigenis
      @JacobZigenis 2 ปีที่แล้ว +3

      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 😍. TH-cam not sho the exact time

  • @anuvabkumarrit4669
    @anuvabkumarrit4669 2 ปีที่แล้ว

    Tried same code not working fine for me

  • @Jana-ns5sg
    @Jana-ns5sg 2 ปีที่แล้ว

    you're cool!

  • @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 ปีที่แล้ว +1

    Hi

  • @raphaeltorsu8655
    @raphaeltorsu8655 2 ปีที่แล้ว

    Bro I need to buy you a car!!

  • @anipezalt4422
    @anipezalt4422 2 ปีที่แล้ว +1

    First

  • @tommybush7062
    @tommybush7062 2 ปีที่แล้ว

    քʀօʍօֆʍ

  • @itcenter9753
    @itcenter9753 2 ปีที่แล้ว

    Ok