Pada postingan kali ini kita akan buat animasi loading atau
preloader berputar sederhana menggunakan css nah animasi berputar banyak di
temukan di website modern, animasi loading berputar menurut saya dapat mempercantik web, animasi loading berputar
ini tidak terlalu rumit karna kita hanya bermain dengan css saja tanpa jquery ok langsung saja kita praktekan let,s the
code
Kita hanya
perlu membuat css seperti di bawah silahkan copy
<style>
.loader {
-webkit-animation: spin 1s linear infinite;
animation:
spin 1s linear infinite;
border: 3px
solid #ddd;
border-top:
3px solid #42a5f5;
border-radius:
50%;
height: 75px;
width: 75px;
}
@keyframes spin {
to {
border-top-color: #FF0000;
-webkit-transform: rotate(360deg);
transform:
rotate(360deg);
}
}
body {
background-color: #f1f2f3;
}
.container {
width: 200px;
margin: 70px
auto;
}
</style>
Lalu copy
code di bawah untuk menampilkan animasi loading nya
<div class="container">
<div
class="loader"></div>
</div>
untuk code lengkap nya copy code di bawah
<html>
<head>
<style>
.loader {
-webkit-animation: spin 1s linear infinite;
animation:
spin 1s linear infinite;
border: 3px solid
#ddd;
border-top:
3px solid #42a5f5;
border-radius:
50%;
height: 75px;
width: 75px;
}
@keyframes spin {
to {
border-top-color: #FF0000;
-webkit-transform:
rotate(360deg);
transform:
rotate(360deg);
}
}
body {
background-color: #f1f2f3;
}
.container {
width: 200px;
margin: 70px
auto;
}
</style>
</head>
<body>
<div
class="container">
<div
class="loader"></div>
</div>
</body>
</html>
Sekian
postingan kali ini semoga bermanfaat jika ada yang di tanyakan silahkan isi
kolom komentar terima kasih
0 Komentar