CSS3 Glowing Gradient Loader Ring Animation Effects
ฝัง
- เผยแพร่เมื่อ 4 ต.ค. 2024
- Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/...
------------------
Join Our Channel Membership And Get Source Code Everyday
Join : / @onlinetutorialsyt
------------------
Please LIKE our Facebook page for daily updates...
/ online-tutorial-html-c...
------------------
Music Credit
Track: Tobu - Roots [NCS Release]
Music provided by NoCopyrightSounds.
• Tobu - Roots | House |...
Latest Version : th-cam.com/video/eBR6s_iD2UA/w-d-xo.html
privated?
and me i'm so happy when i just understand how to center something in my page... then i came here and realised how much hours and work i still need to spend to aquire a bit of that knowledge... make me cry hahaha
Happens dude.....just do a single frontend project and you'll understand almost everything
It's easy but need mind for this❤️❤️
*
{
margin:0;
padding:0;
box-sizing: border-box;
}
body
{
display:flex;
justify-content:center ;
align-items:center;
min-height:100vh;
background:#000;
}
.loader
{
position:relative;
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(45deg,transparent,
transparent 40%, #e5f403);
animation: animate 2s linear infinite;
}
@keyframes animate
{
0%
{ transform: rotate(0deg);
filter:hue-rotate(0deg);
}
100%
{
transform: rotate(360deg);
filter:hue-rotate(360deg);
}
}
}
.loader:before
{
content: '';
position: absolute;
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
background: #000;
border-radius:50%;
z-index: 1000;
}
.loader:after
{
content: '';
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background:linear-gradient(45deg,transparent,
transparent 40%, #e5f403);
border-radius:50%;
z-index: 1000;
z-index:1;
filter: blur(30px);
}
not the hero we want, the hero we NEED. thank you
Tum bohot acha kaam krta h maqsood bhai
You are the best
Thanks
The best youtube channel about programming.
All of ur videos are best
best of luck
one of my favorite channels
I really like your content, I do not speak English but I translated it to be able to tell you thanks to you I learn a lot thanks for sharing your knowledge.
your right im not english but im french&russia
Magnificent Effect, thanks for sharing you knowledge with us;
Hugs from Brazil;
simply nice !
good job as always !
Me after video:
Still Loading.
Coll!
Holy Goat, Unbelievable
Suka amat gitu ya min pake backsong tobu
Wonderful wonderful wonderful wonderful Thank you
Love from Ahmedabad ❤️
I thin yur are the king of CSS
HATS OFF!
Excellent
nical
nice job bro
cool color loading!~ nice!~
Nice work
great one
exellent ! the best clean chanel
thanks for your creativity.👍
Most amazing page. I love your channel
I tried this code, and it worked. Even though this is an old video, is there a tutorial on how to add this to an html page, where the loader will fade?
nice
Good job man 1000/1000.
Awesome Job. thanks and Please do more...
genialne tego szukałem ! dzieki wielkie !!! :)))))))) uff w koncu
Great🤩
Good work bro keep doing such and more videos it really helps me with my coding
Really awesome!🤩
Luv to see this
Bhai please give ur tutorial on html and css u r doing soooo good 😘😘😘😘😘🙏🙏🙏🙏🙏
good
Wow awesome!
Loved your content bro!! KEEP IT UP ALWAYS!!😎
Much appreciated
Lindo de mais 😃
Awesome content man
amazing
Niiiiice
Brilliant!
How to set timeout to the preloader
OMG That's interesting
Wow nice. I'm new to webapps and web services can I use this on my web apps for loading.
Nice effect, but how this work in mobile too?
THANK YOu!!!!!
Still i m confuse, why do we need after pseudo for this ??🤔🤔🤔🤔🤔🤔
Can u make Price Range Filter in the next video my friend? Thx a lot
🔥🔥💯
instead of putting disco teenager music it could be more intersting to put the source code on it :)
And one thing what ur importing can say it in description ??
Can you make preloader like a FreeCharge website animations
Which application ur using bro
why do i need to create ::before and ::after pseudo-class pro ?
How to put "LOADING" text below the loading animation plz tell me i am totally confused for that... I want to write "Content is loading" below the circle. Plzz answer me as soon as possible
what is the name of the app
May I ask why 'before, after' need to set two z-index
They actually don't. You only need to tell the css that the before element should be "on-top" of the others. That's probably why it's been put like that in the video. So you know before and after had the same index, and he put the after behind the before when resetting its z-index to 1.
The div itself serves to show the circle color.
The after element serves to do the same but blur it to have the same color on top of the circle.
The before element serves to "block" the middle of the circle so it has to be on-top of all the other circles.
You can actually just put a single "z-index: 1;" on the before element and it will do the exact same thing.
can u make full web site
His typing speed is like
He can type live lyrics for Eminem 😂
Theres a Little fast forward In video
@@jass__0 i don't think so, cause when he put any time duration in property like animation, the animation work within the time duration, if there was even a little fast forward then we can caught it in animation property
@@yuckertv2701 thats ehat editing called man
@@jass__0 mujhe to nahi pata 😅
can someone tell me how to put this like before the website loaded?
Animate doesnt work for me..why???
can i use ur idea
?
How to write something inside the Loader?
Sir how to add it to my page sir
Sir ye app kese install kare g..
What browser and code editor you use?
Browser seems to be google chrome. Editor seems to be Sublime Text.
@@nGsAngel lol that's VS code
@@jass__0 Doubt. You can see the editor at the top left of the screen. It's Sublime's Icon.
@@nGsAngel you are right . But thats My VS code theme boht editor's got same themes
how did you select the 6's at once?
He select animate 2s and left right 6px
@@techhilfiger1014 how?
Shift + down arrow
One request pls make coding slowly I want to see what you type but u are very speed 😓
U can change the playback speed in TH-cam setting
1.1k likes and 1 dislike. I saw this first time on youtube
you're a profissional?
LIKE LIKE LIKE LIKE
{💖💖💖😉💖😉💖😉💖😉💖😉😆😆😆😆😄😄💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖💖}online
Nice work
amazing
And one thing what ur importing can say it in description ??