Pada saat sedang mengembangkan sistem informasi yang saya kembangkan, terfikir untuk menambahkan css pada tampilan sistem. Setelah berselancar akhirnya saya temukan css yang di cari yaitu cukup menggunakan css tanpa memanggil gambar berekstensi gif. Cukup menggunakan style css saja. Kita sudah dapat menampilkan gambar bergerak / animasi untuk gambar loading yang kita inginkan.
Berikut adalah source code untuk membuat animasi loading dengan CSS :
<html>
<head><title>Membuat Animasi Dengan CSS</title>'
<style>
.loadingcss {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: transparent;
border: 5px solid #222;
border-top: 5px solid #03A9F4;
border-bottom: 5px solid #03A9F4;
-webkit-animation: 1s spin linear infinite;
animation: 1s spin linear infinite;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loadingcss"></div>
</body>
</html>
Demo Loading :
Anda bisa mengganti parameter loading css untuk menyesuaikan dengan keinginan anda. Anda dapat mengubah tebal garis lingkaran, radius besar lingkaran di bagian tag style. atau anda dapat mengubahnya dan memindahkan tag style ke dalam file bernama loading.css seperti berikut :
<html> <head><title>Membuat Animasi Dengan CSS</title> </head> <body> <div class="loadingcss"></div> </body> <link href="loading.css" rel="stylesheet" type="text/css"> </html>
Demikianlah artikel cara membuat gambar loading dengan css kali ini. Semoga bermanfaat
Kode Dikembangkan & Dimodifikasi Oleh : Khairul Umam
Ditulis Oleh : http://cfoucht.com/
