Salam hangat teman-teman, semoga sehat selalu ya. Pada kesempatan kali ini saya akan mencoba berbagi tips bagaimana Cara Membuat Animasi Loading Menggunakan HTML dan CSS3.
Seringkali teman-teman ingin menambahkan efek animasi pada website yang teman-teman buat supaya lebih menarik. Seperti memberi efek animasi pada saat loading berjalan.
Ok, langsung saja saya kasih tau Cara Membuat Animasi Loading Menggunakan HTML dan CSS3:
– Pertama ketikan codingan di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>Animasi</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="page"> <div id="content_container"> <div id="content"> <p>your content</p> </div> </div> </div> </body> </html> |
– Kedua ketikan codingan css di 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 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 |
html, body { height: 100%; } body { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-color: #2980b9; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .load { -webkit-animation: loader infinite 2.5s linear; animation: loader infinite 2.5s linear; border: #FFF 15px solid; border-radius: 50%; box-sizing: border-box; height: 20px; opacity: 0; width: 20px; } @-webkit-keyframes loader { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 20% { opacity: 1; } 25% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { border-width: 0; opacity: 0; -webkit-transform: scale(1.3); transform: scale(1.3); } } @keyframes loader { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 20% { opacity: 1; } 25% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { border-width: 0; opacity: 0; -webkit-transform: scale(1.3); transform: scale(1.3); } } |
– Ketiga teman-teman jangan lupa ketik tag link untuk memanggil file css-nya
|
1 |
<link rel="stylesheet" type="text/css" href="style.css"> |
Ok, sekarang kita lihat hasilnya yah teman-teman:
Sekian tips dari saya kali ini tentang Cara Membuat Animasi Loading Menggunakan HTML dan CSS3.
Selamat mencoba dan tetap jaga kesehatan selalu yah teman-teman.