Membuat Animasi Loader Pacman Dengan CSS3

Apakah kamu sudah mempelajari membuat animasi loader dengan css sebelumnya? dengan membuat animasi loader didalam website, tentu website akan terlihat lebih indah dan professional. apalagi pembahasan kali ini kita akan membuat animasi loader pacman.

membuat animasi loading ini kita menggunakan keyframe animasi. untuk membuat loader pacman kita akan perlu membuat rounded, penggunaa after before dan sebagainya. langsung saja kita masuk ke intinya yuk!

Table of Contents

Cara Membuat Animasi Loader

Seperti biasa siapkan file html nya atau langsung coba di lab , Jika sudah berikut adalah kode lengkapnya:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pac-Man Loader</title>
<link rel="stylesheet" href="styles.css">
</head>

<style>
body {
margin: 0;
background: linear-gradient(to bottom, #1C163A, #000);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}

.loader {
position: absolute;
top: 50%;
left: 50%;
height: 60px;
width: 160px;
margin: 0;
transform: translate(-50%, -50%);
}

.text {
font-size: 24px;
font-weight: bold;
color: #FFFB16;
position: absolute;
padding-top:50px;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
animation: fadeInOut 1s infinite alternate;
}

@keyframes fadeInOut {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.meat {
position: absolute;
left: -5px;
top: 0;
height: 60px;
width: 180px;
}

.meat span {
position: absolute;
top: 25px;
height: 12px;
width: 12px;
border-radius: 12px;
background-color: orange;
}

.meat span.one {
right: 80px;
}

.meat span.two {
right: 40px;
}

.meat {
animation: animmeat 0.5s infinite linear;
}

@keyframes animmeat {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-40px, 0);
}
}

.pacman {
position: absolute;
left: 0;
top: 0;
height: 60px;
width: 60px;
}

.pacman .eye {
position: absolute;
top: 10px;
left: 30px;
height: 7px;
width: 7px;
border-radius: 7px;
background-color: #1C163A;
}

.pacman span {
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 60px;
}

.pacman span::before {
content: "";
position: absolute;
left: 0;
height: 30px;
width: 60px;
background-color: #FFFB16;
}

.pacman .top::before {
top: 0;
border-radius: 60px 60px 0 0;
}

.pacman .bottom::before {
bottom: 0;
border-radius: 0 0 60px 60px;
}

.pacman .left::before {
bottom: 0;
height: 60px;
width: 30px;
border-radius: 60px 0 0 60px;
}

.pacman .top {
animation: animtop 0.5s infinite;
}

@keyframes animtop {
0%, 100% {
transform: rotate(0deg);
}
50% {
transform: rotate(-45deg);
}
}

.pacman .bottom {
animation: animbottom 0.5s infinite;
}

@keyframes animbottom {
0%, 100% {
transform: rotate(0deg);
}
50% {
transform: rotate(45deg);
}
}

</style>
<body>
<div class="loader">
<div class="meat">
<span class="one"></span>
<span class="two"></span>

</div>
<div class="pacman">
<span class="top"></span>
<span class="bottom"></span>
<span class="left"></span>
<div class="eye"></div>
</div>
<div class="text">Loading...</div>
</div>
</body>
</html>

Kira-kira hasilnya akan seperti ini: