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🤗🤗
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.
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.
The main difference between him and us is that he does a lot more than we do. The more experience you have, the more creative you are. We're very creative, but we're not doing enough.
--i refers to a css variable which is fetched within the selector by calling "var(--i)" for the current object. he assigned increasing values to all the elements beforehand. take a look at 2:00 :)
Sir can you please make a video about a responsive chatbot ui. When in desktop mode it should be in a chat window and when in tablet or mobile mode it should be full screen. I love your videos please help me here.
--i is a CSS variable that he declared for himself and used it to have each a different delay by setting the --i variable each differently. As he did: +1 after each so it's not randomly blinking.
You are awesome. Your videos are too short and cool bro! But i want to add loader when webpage data is loading or for 2-3 second so can't it be created. Pls make next video for this!!
Hey I love the animation ive got it working and everything, just need a bit of help in making it then dissapear after everythings loaded and show the actuall website sorry im new to all this was wondering if anyone knew a way :)
I used this loader in my project but it throwing me an error that you tried to parse scss with standered CSS parser try again with the postcss parser can u help me to fix this issue
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🤗🤗
trash
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.
no he is bad
i just cant believe this is pure css !! Thank u sir
Its pure css bro...please watch full video ... Its very easy
@@OnlineTutorialsYT bro I want learn advance html and css ..how can I bro.. please could you help me bro..,...I waiting for your rply bro
@@nareshreddy1561 join his course
@@techyaastik2358 how much bro ....
@@nareshreddy1561 link in his description.
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.
If your using in a React project the syntax for the span's is as follows:
Create using< td > and
How do you get such creative ideas?
Yes, I have same question
The main difference between him and us is that he does a lot more than we do. The more experience you have, the more creative you are. We're very creative, but we're not doing enough.
@@zFreshx yaa exactly
Plz tell us
The answer is learn.
your work is truly great
Wait a sec, lmao this was the first time I see u use two :: at before/after
To avoid typing span multiple times, using Emmet type: span[style=--i:$;]*20
shush
nice you kept it simple and looks great!
and i was thinking today to create the same loading animation...but ill try to do it with my own code
Good luck
You took My heart !!! ♥️ Really!
Glad that I joined your channel! This is really awesome
Thanks for your support bro
awesome
" tranform: rotate(calc(18deg * var(--i))); " this code is not working in css
In spck app for mobile
me too... I try but don't action from this code
Okay i resolved
.loader { width:120px }
Amazing 💚💛❤🙏
Great🎉 awesome ❤️
thanks for sharing your talent.
its awesome man
can you explain that --i:1 🙄 what is that & why you used that ? btw loader is really really amazing 🥳
That's a CSS variable. He used it to rotate the individual span elements.
Very nice! Thank you
Awesome 👍!
Sooooo cooool!
Ohh it's Amazing
to How to achieve?
Sir, can u explain for me how the --i keep increasing when you use only "section .loader span" but not the nth-child() ?
--i refers to a css variable which is fetched within the selector by calling "var(--i)" for the current object. he assigned increasing values to all the elements beforehand. take a look at 2:00 :)
Thank u !!!
Amazing effects..i love css and js effects.
horrible
i love it
Awesome!! 👏👏👏
0:40 what command button to do this sir?
I have to copy change the number for each one
Its cool
Waw, it's so great
Fantastic!
Sir can you please make a video about a responsive chatbot ui. When in desktop mode it should be in a chat window and when in tablet or mobile mode it should be full screen. I love your videos please help me here.
amazing!
Keep it up🔥🔥
Bright mashahllh
I like your videos
I did 500th like
Genius
brooooo! 💯🙌
Nice work
Thank bro
sir please can you tell what is the (--i) and why you added it to var in transform for the pattern
sir please reply
I hope its help you www.w3schools.com/css/css3_variables.asp
--i is a CSS variable that he declared for himself and used it to have each a different delay by setting the --i variable each differently. As he did: +1 after each so it's not randomly blinking.
@@OnlineTutorialsYT thank you sir
Can we use (-i )or something other like that to declare css variable instead of (--i) ?
Bhai ek complete e-commerce website bana ke dikhao na apne css ka jaadu chalake plz plz plz
Big fan❤️❤️
Good job
wonderful
Loader is amazing
I want to know how to make as a loader for the web page when loading please reply .
You are amazing.
@Script Kiddie ok I will check
Dont use jquery. Its not actual.
@ZYROUGE thank you so much
Beautiful
Thank you :)
How you took that style="--i:1;,
Till --i:20 via shortcut??
nice!
Mine don't have 20 squres since this part at 2:02: transform: rotate(calc(18deg * var(--i))); Any idea?
Mine too
@@ryder8328 Maybe there are some secrets only for the VIPs.
Какого хера чел? Ты что творишь? Это же гениально!!!
I put 0.2 seconds and got 2 snakes in --> section .loader span::before { animation-delay: calc(0.2s * var(--i)); } OR 0.3 - 3 snakes
you are ceative parson awsom
hehehe it looks easy when u doing it
You are awesome. Your videos are too short and cool bro! But i want to add loader when webpage data is loading or for 2-3 second so can't it be created. Pls make next video for this!!
Last part of rotation isn't working i need some help
Hey I love the animation ive got it working and everything, just need a bit of help in making it then dissapear after everythings loaded
and show the actuall website sorry im new to all this was wondering if anyone knew a way :)
How to put it between pages
what is the role of "style="--i:1;">, actually i don't understand how is it working and what is it doing
My last part of the rotation isn't working. Anyone help me out
But how to add this on webpage till data loaded
Ok...i'll make a video
@@OnlineTutorialsYT Thanks
@@OnlineTutorialsYT thank you
Wow
Where to download this file
what plugins do you use, please? (vscode and sublime text)
I used this loader in my project but it throwing me an error that you tried to parse scss with standered CSS parser try again with the postcss parser can u help me to fix this issue
Is there a way to learn visual studio code? I do coding classes, but I still want to learn more about vs code.
Unfortinally, the box sizing is not supported on chromebooks and IE6 or IE7
can you help mee pleeasee i cant see anything theres only white page
how can you copy several span with continuous number of i at 0:41
how can i get the source code of this project
very nice, but can you explain to us how do you do this effect please
You are epic indian
I love muhammed you best teather
You just do it too fast next time show it slowly or some can't understand. Btw nice design
como se podria hacer lo mismo pero desde css en react
gracias
How I can stop it and shaw my bags???
What program do u use
animation: animate 2s linear infinity not working
i use sublime text
Listen you can do neuroweb animation?
Ok
Could you please say me what did u did in @2:54 ..?
animation-delay: calc(0.1s * var(--i));
❤️❤️
Do I get every source code if I get a membership every month ????
Bruh why not working
Edit : sorry it's WORKS THANKYOU 🔥💯👏
I did copy paste this code in my laptop. It didn't work anymore.
can this code use for my wordpress website? can you give me code text to copy? thanks
i wrote the same code but its not working
for me too :/
What did you do after to copy lines with increasing İ ?
Just skipped the video
@@sooriyam5007 :D I thougth, there is a short cut. Thanks.
No with emmet create the other lines
Do not work for me, it only give me green screen and green dots
Can I get the gif of the loading
😅😅
Can u please explain us too.....
👍🆂🆄🅿🅴🆁👈
first
Need explanation on this
Sir please do any website with simple html code so that many can understand and your subscribes my increase ☺️😊😊😊☺️☺️☺️
Can I get the source code? please
Bro source code nahi milega
Sir I request when your doing something wonder please also include your voice in video