CSS Loading Animation:
CSS 3 dots loading animation is a very usefull project if you wanna make an app where you want a
loading animation like other apps. Giving a loading animation in your app or website will make your website or app look professional and it will give a great user experience and your app or website will go viral with this loading animation. We are going to see how we can make a loading animation using CSS
Roadmap of loading animation:
- First we will create 3 div with class of 'dot dot1', 'dot dot2', 'dot dot3'
- Second we will create a simple dot shape
- Third and final give each dot a different animation
HTML:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3 Dot Loading</title> <link rel="stylesheet" href="style.css"></head><body> <div class="dot dot1"></div> <div class="dot dot2"></div> <div class="dot dot3"></div></body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3 Dot Loading</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
</body>
</html>
CSS:
body {
background: fixed;
background-color: #11161b;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.dot {
position: relative;
left: 25px;
height: 25px;
width: 25px;
display: inline-block;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.dot1 {
background-color: cyan;
animation: scale 1s linear infinite;
}
.dot2 {
background-color: cyan;
animation: scale 1s .1s linear infinite;
}
.dot3 {
background-color: cyan;
animation: scale 1s .2s linear infinite;
}
@keyframes scale {
0% {
transform: scale(1);
}
25% {
transform: scale(.5);
}
50% {
transform: scale(.0);
}
75% {
transform: scale(.5);
}
100% {
transform: scale(1);
}
}
Comments
Post a Comment