Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Animasi Loading Bars Menggunakan HTML CSS. Loading itu sebenarnya sangat membosankan dimana saat sahabat membuka sebuah website, tentu sering dijumpai loading saat ingin membuka halaman yang diinginkan. Masalah oading biasanya entah itu masalah jaringan atau dari reload websitenya. Nah saya akan membagikan cara pembuatanya untuk sahabat Dumetschool yang pengen buat kreasi animasi loading.Baiklah coba sahabat ikutin langkah-langkah berikut ini ;
Langkah pertama sahabat buat struktur HTMLnya ketikan script seperti dibawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cara Membuat Loading Bars</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="box"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="teks">LOADING</div> </div> </body> </html> |
Langkah yang Kedua sahabat berikan style CSS simpan filenya berikan nama style.css seperti dibawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
body{ margin: 0; padding: 0; } .container{ width: 50%; height: 70vh; margin:auto; background-color: #465356; position: fixed; top: 0; left: 25%; overflow: hidden; z-index: 9999; } .box{ width: 80px; height: 80px; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); } .teks{ font-family: sans-serif; font-size: 14px; font-weight: bold; color: #fffa00; letter-spacing: 5px; position: absolute; top:57%; left:50.9%; transform: translateX(-50%); } /*.box ul{ list-style: none; margin:0; padding: 0; }*/ .box span{ width: 15px; height: 0; background-color: #0007ED; position: absolute; bottom: 0; } @keyframes sequence1{ 0%{ height: 30px; background-color: red; } 50%{ height: 80px; background-color: yellow; } 100%{ height: 30px; background-color: green; } } @keyframes sequence2{ 0%{ height: 40px; background-color: yellow; } 50%{ height: 90px; background-color: green; } 100%{ height: 40px; background-color: red; } } .box span:nth-child(1){ left:0; animation:sequence1 1s ease infinite 0s; } .box span:nth-child(2){ left:15px; animation:sequence2 1s ease infinite 0.1s; } .box span:nth-child(3){ left:30px; animation:sequence1 1s ease infinite 0.2s; } .box span:nth-child(4){ left:45px; animation:sequence2 1s ease infinite 0.3s; } .box span:nth-child(5){ left:60px; animation:sequence1 1s ease infinite 0.4s; } .box span:nth-child(6){ left:75px; animation:sequence2 1s ease infinite 0.5s; } |
Jika sudah diketikan kedua file diatas lalu coba jalankan pada browser masing-masing.
Demikian pembahasan tentang Cara Membuat Animasi Loading Bars Menggunakan HTML CSS, Semoga bermanfaat dan selamat mencoba.
terima kasih