Mau tahu cara buatnya?
Gampang, pertama kamu harus punya file *.gif. Kamu bisa cari di browser dan download. Ganti namanya dari cake.gif menjadi file .gif yang kamu punya.
Buat file html dengan nama loadingbar.html
Ingat, agar file .gif muncul harus berada dalam satu folder dengan file loadingbar.html
Setelah itu, kamu bisa ketikan seperti ini :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Loading kue</title>
<style>
body {
background: linear-gradient(to top, #fceff9, #e0f7fa);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Comic Sans MS', cursive;
}
.loader-container {
text-align: center;
}
.cake {
width: 80px;
height: 80px;
margin-bottom: 20px;
animation: bounce 1s infinite ease-in-out;
}
.cake img {
width: 100%;
height: 100%;
object-fit: contain;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
.bar {
width: 200px;
height: 10px;
background: #ddd;
border-radius: 5px;
overflow: hidden;
position: relative;
}
.bar::before {
content: '';
position: absolute;
height: 100%;
width: 50%;
background: linear-gradient(to right, #ff80ab, #80deea);
animation: loading 2s infinite;
}
@keyframes loading {
0% {
left: -50%;
}
100% {
left: 100%;
}
}
.text {
margin-top: 10px;
color: #555;
font-size: 14px;
}
</style>
</head>
<body>
<div class="loader-container">
<div class="cake">
<img src="cake.gif" alt="cake Loading" />
</div>
<div class="bar"></div>
<div class="text">tunggu ya nom..nom..nom...</div>
</div>
</body>
</html>
Tidak ada komentar:
Posting Komentar