How to design the loading animation effect of Google Assistant via HTML and CSS only.
How to design the loading animation effect of Google Assistant via HTML and CSS only.
Hey Guys WhatsUp, how do I know? Again I have a new post.
So every day I am trying to post one post and another video tutorial. So that I can teach you something as quickly as possible. So today, when we open Google Assistant, we will see how to design a loading animation on. So don't see the code:
So every time you give the code you copy and make two files. Place the following code in Index.html:
Save and leave. And keep the following code to style.css:
So every day I am trying to post one post and another video tutorial. So that I can teach you something as quickly as possible. So today, when we open Google Assistant, we will see how to design a loading animation on. So don't see the code:
So every time you give the code you copy and make two files. Place the following code in Index.html:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Bouncy Loader - Pogamar | The Tech Therapist</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="google-loader">
<div class="loader-elements one"></div>
<div class="loader-elements two"></div>
<div class="loader-elements three"></div>
</div>
</div>
</body>
</html>
Example
/*
*
* Google Bouncy Loader
* Pogamar
* The Tech Therapist
*
*/
* {
margin: 0;
padding:0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
}
.main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.google-loader {
display: grid;
grid-template-columns: 2rem 2rem 2rem;
justify-content: center;
align-items: center;
}
.loader-elements {
border-radius: 100%;
width: 1.5rem;
height: 1.5rem;
animation-duration: 1s;
animation-name: bouncy;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
.one {
background: #d1493d;
}
.two {
background: #668ceb;
animation-delay: 1s;
}
.three {
background: #eebf2f;
animation-delay: 1.5s;
}
@keyframes bouncy {
from {
transition: translate(0, 0);
}
to {
transform: translate(0, -1rem);
}
}
