Halo, ketemu lagi dengan saya :). Apa kabar nya nih ? Semoga baik yah, amin.
Pada kesempatan kali saya akan berbagi tutorial mengenai Cara Membuat Animasi Loading Dengan CSS3, Nah diantara kalian pasti sudah tau apa itu loading, biasanya kita jumpai ketika kita bermain game, nah sebelum memulai game pasti ada loading nya dulu yah :D, Nah sekarang saya akan mencoba membuatnya, langsung saja kita praktikan.1. Seperti biasa silahkan buka teks editor nya terlebih dahulu, kemudian ketikan kode HTML berikut:
|
1 2 |
<div class="loader"></div> <div class="loader2"></div> |
2. Kalo sudah, lanjutkan untuk kode CSS nya, silahkan ketikan kodenya berikut 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 |
body{background-color:#161616;padding:50px} .loader { background-color: rgba(0,0,0,0); border:5px solid rgba(225, 0, 56, 0.8); opacity:.9; border-right:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 35px #ff3300; width:50px; height:50px; margin:0 auto; -moz-animation:berputar 1s infinite ease-in-out; -webkit-animation:berputar 1s infinite linear; } .loader2 { background-color: rgba(0,0,0,0); border:5px solid rgba(225, 0, 56, 0.8); opacity:.9; border-left:5px solid rgba(0,0,0,0); border-right:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 15px #ff3300; width:30px; height:30px; margin:0 auto; position:relative; top:-50px; -moz-animation:berputarkecil 1s infinite linear; -webkit-animation:berputarkecil 1s infinite linear; } @-moz-keyframes berputar { 0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;} 50% { -moz-transform:rotate(145deg); opacity:1; } 100% { -moz-transform:rotate(-320deg); opacity:0; } } @-moz-keyframes berputarkecil { 0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); } } @-webkit-keyframes berputar { 0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; } 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; } } @-webkit-keyframes berputarkecil{ 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); } } |
3. Setelah itu jangan lupa disimpan, kemudian coba jalankan di browser nya masing-masing dan lihat hasil nya.
Cukup mudah yah ?
Baik sampai disini tutorial mengenai Cara Membuat Animasi Loading Dengan CSS3, Semoga bermanfaat, amin
Selamat Mencoba 🙂