Creative CSS Loading Animations Effects | CSS Animation Tutorial for Beginners

Enroll My Course : Next Level CSS Animation and Hover Effects

Another Course : Build Complete Real World Responsive Websites from Scratch
------------------
Join Our Channel Membership And Get Source Code of My New Video's Everyday!
------------------

------------------

------------------
give proper credit if you repost this on other social media platform
------------------
Music Credit
Song: Xad - Birds (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
------------------
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use

[surenderoati]

i struggle in photoshop and created 10 png and then created gif .. never thought it can be done using css as well.. Hats off you bro.. i am too glad and watching your prev video and really enhancing css skills.. thanks lot bro🤗🤗

[thegreatsteve]

Thank you for posting this cool animation!
If you'd increase the base animation-delay from 0.1s to 0.2s you'd get the semi-circles following each other which is another cool thing to try out.

[matheushenrique-wskm]

Man, I from Brazil, and need to say, I love your videos, they help a me lot with front-end, I program in back-end and your videos give me awesome ideas. Thanks a lot man.

[grantheho]

i just cant believe this is pure css !! Thank u sir

[mayankkumbhar]

Create using< td > and<tr>

[basedCoding]

If your using in a React project the syntax for the span's is as follows:
<span style={{"--i": 1} as React.CSSProperties}></span>

[rjnkixnabichannel]

0:40 what command button to do this sir?
I have to copy change the number for each one

[benjaminnguyen]

nice you kept it simple and looks great!

[DineshkumarPuli]

Glad that I joined your channel! This is really awesome

[DuyTran-mvcl]

how can you copy several span with continuous number of i at 0:41

[axj]

Mine don't have 20 squres since this part at 2:02: transform: rotate(calc(18deg * var(--i))); Any idea?

[xsquadgamer]

" tranform: rotate(calc(18deg * var(--i))); " this code is not working in css

[okandme]

Wait a sec, lmao this was the first time I see u use two :: at before/after

[kuldipthakkar]

can you explain that --i:1 🙄 what is that & why you used that ? btw loader is really really amazing 🥳

[sunilbhavecharlie]

How you took that style="--i:1;,
Till --i:20 via shortcut??

[movieaddict]

sir please can you tell what is the (--i) and why you added it to var in transform for the pattern
sir please reply

[artist]

Could you please say me what did u did in @2:54 ..?

[Haictt]

Sir, can u explain for me how the --i keep increasing when you use only "section .loader span" but not the nth-child() ?

[CodeTic]

Amazing effects..i love css and js effects.