Windows Loader Animation Using CSS


Pernah melihat loading nya windows 10. Mari kita coba buat menggunakan HTML dan CSS. Pertama-tama buatlah folder dan beri nama windows-loader. Kemudian buat file html nya, beri nama index.html di dalam folder windows-loader. Dan masukkan kode berikut :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!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>Windows Loader</title>
</head>
<body>
    <div class="container">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>

Kemudian sisipkan file css, masukkan kode berikut pada bagian head.

1
<link rel="stylesheet" href="style.css">

Buat file baru pada folder yang sama dan beri nama style.css dan masukkan kode berikut.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #00a2ed;
    overflow: hidden;
}

Simpan dan coba buka file index.html menggunakan browser.


Background nya berwarna biru, mirip seperti windows 10 pada umumnya. Kemudian kita tambahkan lagi kode pada file style.css.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 2px;
    background-color: #fff;
    opacity: 0;
    animation: load 3s ease-in-out infinite;
}

span:nth-child(5) { animation-delay: 150ms;}
span:nth-child(4) { animation-delay: 300ms;}
span:nth-child(3) { animation-delay: 450ms;}
span:nth-child(2) { animation-delay: 600ms;}
span:nth-child(1) { animation-delay: 750ms;}

Setelah disimpan belum terlihat perubahannya. Karena animasi load belum kita buat. Mari kita buat animasinya. Tambahkan lagi kode berikut pada file style.css.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
@keyframes load {
    0%{
        transform: translateX(-500px);
        opacity: 0;
    }
    30%,60%{
        transform: translateX(0);
        opacity: 1;
    }
    100%{
        transform: translateX(500px);
        opacity: 0;
    }
}

Simpan perubahannya dan lihat pada browser. Tampak animasi loadingnya seperti windows 10.