 |
| Output |
Untuk membuatnya sangat mudah cukup dengan menggunakan file html dan CSS
1. Buat file html dengan nama "Loading.html",kemudian ketik kode dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Animation</title>
<link rel="stylesheet" href="Loading.css">
</head>
<body>
<div class="loader">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</body>
2. Buat juga file CSS nya dengan nama "Loading.css" lalu ketik kode CSS dibawah ini :
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.loader {
display: flex;
justify-content: space-between;
align-items: center;
width: 100px;
}
.dot {
width: 15px;
height: 15px;
background-color: #3498db;
border-radius: 50%;
animation: dot-blink 1.4s infinite both;
}
.dot:nth-child(1) {
animation-delay: -0.32s;
}
.dot:nth-child(2) {
animation-delay: -0.16s;
}
.dot:nth-child(3) {
animation-delay: 0s;
}
@keyframes dot-blink {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
No comments:
Post a Comment