Home / Tutorial Pemrograman / Cara Membuat Animasi Loading Bird dengan CSS

Cara Membuat Animasi Loading Bird dengan CSS

Tutorial By Esti Pinarsih

Posted on Agustus 9th, 2024

Loading atau load time website merupakan waktu yang diperlukan oleh browser untuk menampilkan tempilan website secara keseluruhan. Ada banyak sekali hal yang mempengaruhi kecepatan proses loading seperti elemen HTML, CSS, JavaScript, banyaknya gambar, akses internet dan masih banyak lagi.

Dengan bahasa pemograman, kita dapat dengan mudah membuat berbagai macam tampilan loading di website. Salah satunya adalah membuat animasi loading bird. Loading nantinya akan menampilkan animasi kepala bird yang akan bergantian posisi ke kanan dan ke kiri. Untuk membuat animasi loading bird juga tidaklah sulit, karena hanya membutuhkan bahasa pemograman HTML dan bahasa pemograman CSS.

Lalu, bagaimana caranya membuat animasi loading bird dengan bahasa pemograman CSS? Yuks langsung saja buka computer kamu dan ikuti beberpa langkah dibawah ini.

1. Buka XAMPP Control Panel, serta aktifkan Apache.

2. Buka program teks editor yang ter-install di computer kamu, disini saya menggunakan teks editor Notepad++. Ketikkan kode HTML5 berikut ini.

<!DOCTYPE html>
<html>
<head>
    <title>Animasi Loading Bird</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="bird">
            <div class="hair-container">
                <div class="hair"></div>
            </div>
            <div class="face">
                <div class="white-container">
                    <div class="white"></div>
                </div>
                <div class="shadow-container">
                    <div class="shadow"></div>
                </div>
                <div class="bigBeak-container">
                    <div class="bigBeak"></div>
                </div>
                <div class="smallBeak-container">
                    <div class="smallBeak"></div>
                </div>
                <div class="eye"></div>
            </div>
        </div>
    </div>
</body>
</html>

Simpan kode HTML5 diatas di folder xampplite – htdocs – buat folder baru dengan nama LoadingBird – simpan kode diatas dengan nama index.html.

3. Untuk melihat hasil script code diatas, kamu bisa buka browser kamu ketiklah http://localhost/LoadingBird.

4. Untuk membuat bird, ketikkan kode CSS berikut ini.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    overflow: hidden;
}

.wrapper{
    width: 100vw;
    height: 100vh;
    background-color: #f0e68c;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bird{
    position: relative;
    width: 250px;
    height: 250px;
}

.hair-container{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    animation: rotateHair 3s infinite ease-in-out;
}

.hair{
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 50%;
    background-color: #A12A15;
    border-radius: 0 125px 125px 0;
}

.face{
    position: absolute;
    width: 70%;
    height: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.white-container{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    animation: rotateWhite 3s infinite ease-in-out;
}

.white{
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 50%;
    border-radius: 0 87.5px 87.5px 0;
    background-color: white;
}

.shadow-container{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    animation: rotateShadow 3s infinite ease-in-out;
}

.shadow{
    position: absolute;
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 0 0 87.5px 0;
}

.bigBeak-container{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    animation: rotBigBeak 3s infinite ease-in-out;
}

.bigBeak{
    position: absolute;
    width: 50%;
    height: 50%;
    top: 0;
    left: 0;
    background-color: #f7ce42;
    border-radius: 87.5px 0 0 0;
}

.smallBeak-container{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    animation: rotSmallBeak 3s infinite ease-in-out;
}

.smallBeak{
    position: absolute;
    width: 25%;
    height: 25%;
    top: 50%;
    left: 25%;
    background-color: #f7a500;
    border-radius: 0 0 0 43.25px;
}

.eye{
    position: absolute;
    width: 25%;
    height: 25%;
    bottom: 51%;
    left: 51%;
    background-color: #18233e;
    border-radius: 50%;
    z-index: 2;
    animation: moveEye 3s infinite ease-in-out;
}

Simpan kode CSS di folder xampplite – htdocs – pilih folder LoadingBird – simpan code CSS dengan nama style.css.

5. Reload alamat url : http://localhost/LoadingBird. Tampilan bird sudah siap, namun animasi loading belum muncul.

6. Untuk membuat animasi loading pada tampilan bird, buka kembali file style.css dan lanjutkan script code CSS berikut ini.

@keyframes rotateHair{
    0%{
        transform: rotate(-360deg);
    }
    15%{
        transform: rotate(-360deg);
    }
    35%{
        transform: rotate(-180deg);
    }
    65%{
        transform: rotate(-180deg);
    }
    85%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

@keyframes rotateWhite{
    0%{
        transform: rotate(0deg);
    }
    15%{
        transform: rotate(0deg);
    }
    35%{
        transform: rotate(-180deg);
    }
    65%{
        transform: rotate(-180deg);
    }
    85%{
        transform: rotate(-360deg);
    }
    100%{
        transform: rotate(-360deg);
    }
}

@keyframes rotateShadow{
    15%{
        transform: rotate(0deg);
    }
    35%{
        transform: rotate(90deg);
    }
    65%{
        transform: rotate(90deg);
    }
    85%{
        transform: rotate(0deg);
    }
}

@keyframes rotBigBeak{
    15%{
        transform: rotate(0deg);
    }
    35%{
        transform: rotate(90deg);
    }
    65%{
        transform: rotate(90deg);
    }
    85%{
        transform: rotate(0deg);
    }
}

@keyframes rotSmallBeak{
    15%{
        transform: rotate(0deg);
    }
    35%{
        transform: rotate(-90deg);
    }
    65%{
        transform: rotate(-90deg);
    }
    85%{
        transform: rotate(0deg);
    }
}

@keyframes moveEye{
    15%{
        left: 51%;
        transform: translate(0px);
    }
    35%{
        left: 49%;
        transform: translate(-100%);
    }
    65%{
        left: 49%;
        transform: translate(-100%);
    }
    85%{
        left: 51%;
        transform: translate(0px);
    }
}

Jangan lupa untuk Ctrl+S.

7. Reload alamat url : http://localhost/LoadingBird. Berikut tampilan dari loading bird sudah siap. Secara bergantian kepala bird akan berpindah posisi ke kiri dan ke kanan.

Tampilan dari loading bird lainnya.

8. Selesai.

Catatan :

Htdocs adalah salah satu folder bawaan dari XAMPP, yang tugasnya khusus untuk menyimpan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML, CSS, dan JavaScript.
Kemudian, mungkin ada yang menanyakan maksud dari http://localhost/LoadingBird. Localhost merupakan server lokal pada computer. Localhost dapat diaktifkan ketika anda meng-klik start Apache di XAMPP Control Panel. LoadingBird menunjuk pada folder LoadingBird saya di xampplite – htdocs. Serta, index.html dan style.css adalah nama file yang tersimpan script code diatas.

Demikian penjelasan dari tutorial Cara Membuat Animasi Loading Bird dengan CSS.