How to design google type animated loader using html and CSS
Hello guys, Planics Devloper is
providing HTML,CSS,BootStrap,JavaScript,PHP. If you want any design then
copy code from our post otherwise watch our video on blog.
If you want to design Product card or
something then click here and get latest design
free Click here
How to design Best card hover in 2020?
design beautiful multicolor amination
loader using html and CSS . you learn in this video how to design square aminated
loader using html and CSS.
How to design different type of animation in one loader using html and css?
Free Cards Effect in HTML with CSS
How to design puzzle type loader using only html and CSS?How to design multicolor animatedloader using html and CSS?
Here we show you how to google animated
loader for website so please check it out in YouTube.
loader.html
|
<!DOCTYPE html>
<html>
<head>
<title>Google Loader</title>
<style>
body
{
background:#222;
}
.container{
width:250pt;
height:330pt;
display:grid;
place-items:center ;
position:absolute ;
top:50%;
left:50%;
transform:translate(-50% , -50%);
}
.google{
position:absolute ;
width:106pt;
height:35pt;
top:50%;
left:50%;
transform:translate(-50% , -50%);
}
.g{
background:linear-gradient(to bottom right , rgb(66 , 133 , 244 ) 50%
, rgb(21 , 101 , 192) 50%);
width:25pt;
height:25pt;
border-radius:50%;
position:absolute ;
left:2pt;
bottom:3pt;
animation
: G 1s linear infinite;
}
@keyframes G{
0%{
transform:
rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
.o{
background:linear-gradient(to bottom , rgb(234 , 67 , 53) 50% ,
rgb(198 , 40 , 40) 50%);
border-radius:50%;
width:15pt;
height:15pt;
position:absolute ;
left:29pt;
bottom:3pt;
animation:o 1.5s
ease-in-out infinite ;
}
@keyframes o{
50%{
left:46pt;
z-index:10;
}
}
.o2{
background:linear-gradient(to bottom , rgb(251 , 188 , 5) 50% ,
rgb(255 , 145 , 0) 50%);
width:15pt;
height:15pt;
position:absolute ;
left:46pt;
bottom:3pt;
border-radius:50%;
animation:o2
1.5s ease-in-out infinite ;
}
@keyframes o2{
50%{
left:29pt;
}
}
.g2{
background:linear-gradient(to bottom right , rgb(66 , 133 , 244 ) 50%
, rgb(21 , 101 , 192) 50%);
width:15pt;
height:15pt;
border-radius:50%;
left:63pt;
top:6pt;
position:absolute ;
animation:rotate
2s ease-out infinite ;
}
.down_part{
content:"";
position:absolute ;
background:
rgb(21 , 101 , 192) ;
width:15pt;
height:7.5pt;
bottom:-10pt;
border-bottom-left-radius:15pt;
border-bottom-right-radius:15pt;
left:50%;
transform:translateX(-50%);
}
@keyframes rotate{
100%{
transform:rotateY(2turn);
}
}
.l{
background:linear-gradient(to right , #00a86b , #29ab87 , #00a572 ,
#50c878);
width:5pt;
height:25pt;
border-radius:2pt;
background-size:400% 400%;
background-position:0% 200%;
position:absolute ;
left:80pt;
bottom:3pt;
animation:l 8s
linear infinite ;
}
@keyframes l{
25%{
background-position:100% 200%;
}
50%{
background-position:200% 200%;
}
75%{
background-position:300% 200%;
}
100%{
background-position:400% 200%;
}
}
.e{
background:linear-gradient(to bottom , rgb(234 , 67 , 53) 50% ,
rgb(198 , 40 , 40) 50%);
width:15pt;
height:15pt;
border-radius:50%;
position:absolute ;
left:89pt;
bottom:3pt;
animation:e 2s
linear infinite ;
}
@keyframes e{
100%{
transform:rotateX(1turn) rotateY(1turn) rotateZ(1turn);
}
}
.e:after{
content:"";
position:absolute ;
width:7.5pt;
height:7.5pt;
background-color:#222;
right:0;
bottom:0;
}
.line{
background:linear-gradient(to right , #4285F4 , #DB4437 , #F4B400 ,
#0F9D58);
width:106pt;
height:3pt;
border-radius:2pt;
background-size:400% 400%;
background-position:0% 200%;
position:absolute ;
bottom:-5pt;
animation:line
5s linear infinite ;
}
@keyframes line{
0%{
background-position:0% 200%;
}
25%{
background-position:100% 200%;
}
50%{
background-position:200% 200%;
}
75%{
background-position:300% 200%;
}
100%{
background-position:400% 200%;
}
}
</style>
</head>
<body>
<div
class="container">
<div
class="google">
<div class="g"></div>
<div class="o"></div>
<div
class="o2"></div>
<div class="g2">
<div class="down_part"></div>
</div>
<div class="l"></div>
<div class="e"></div>
<div class="line"></div>
</div>
</div>
</body>
</html>
|
0 coment�rios: