Tutorial Cara Membuat Animasi Loading Keren Menggunakan Html Dan Css
Senin, 05 Agustus 2019
Oke, pada kesempatan kali ini kami akan kembali membagikan sebuah tutorial cara membuat animasi loading keren. Ini cukup bagus jika digunakan pada web atau blog Anda, ringan dan ini tidak akan menghambat waktu laju pemuatan halaman Anda nantinya.
Sebelumnya ini sudah saya coba dan hasilnya pun berjalan (work). Animasi ini hanya menggunakan Html dan Css saja sebagai bahannya. Pada postingan lalu kami juga telah membagikan cara membuat animasi css bergerak dengan animation iteration count.
Bagi Anda yang penasaran dan ingin mencobanya, bisa langsung saja kopi paste kode-kodenya dibawah.
Live Demo
Untuk langkah pertama mari kita buat Html nya seperti ini:
Jika sudah, lanjut ketahap selanjutnya yaitu buat Css nya, dan kodenya seperti dibawah ini:
Simpan kedua file tersebut dan jika digabungkan hasilnya akan seperti ini:
Langkah terakhir adalah, kunjungi melalui browser masing-masing dan lihat bagaimana hasilnya.
Bagi Anda yang penasaran dan ingin mencobanya, bisa langsung saja kopi paste kode-kodenya dibawah.
Cara Membuat Animasi Loading
Live Demo
Untuk langkah pertama mari kita buat Html nya seperti ini:
<div class='wrapper'>
<div></div>
</div>
<div class='wrapper'>
<div></div>
</div>
<div class='wrapper'>
<div></div>
</div>
<div class='wrapper'>
<div></div>
</div>
<div class='wrapper'>
<div></div>
</div>
Jika sudah, lanjut ketahap selanjutnya yaitu buat Css nya, dan kodenya seperti dibawah ini:
* {
box-sizing: border-box;
}
html,
body {
align-items: center;
background: linear-gradient(45deg, #d91e18, #9a12b3);
display: flex;
justify-content: center;
margin: 0;
min-height: 100vh;
padding: 0;
width: 100vw;
}
.wrapper {
position: absolute;
}
.wrapper:nth-of-type(2)>div {
height: 40px;
width: 40px;
opacity: 0.8;
}
.wrapper:nth-of-type(3)>div {
height: 30px;
width: 30px;
opacity: 0.6;
}
.wrapper:nth-of-type(4)>div {
height: 20px;
width: 20px;
opacity: 0.4;
}
.wrapper:nth-of-type(5)>div {
height: 10px;
width: 10px;
opacity: 0.2;
}
div>div {
background: #fff;
border-radius: 100%;
height: 50px;
margin: 40px;
width: 50px;
}
.wrapper {
-webkit-animation: x 1s ease-in-out alternate infinite 0s both;
animation: x 1s ease-in-out alternate infinite 0s both;
}
.wrapper > div {
-webkit-animation: y 1s linear infinite 0s both;
animation: y 1s linear infinite 0s both;
}
.wrapper:nth-of-type(2),
.wrapper:nth-of-type(2) > div {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.wrapper:nth-of-type(3),
.wrapper:nth-of-type(3) > div {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.wrapper:nth-of-type(4),
.wrapper:nth-of-type(4) > div {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.wrapper:nth-of-type(5),
.wrapper:nth-of-type(5) > div {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
@-webkit-keyframes x {
0% {
-webkit-transform: translate(-100px, 0);
transform: translate(-100px, 0);
}
100% {
-webkit-transform: translate(100px, 0);
transform: translate(100px, 0)
}
}
@keyframes x {
0% {
-webkit-transform: translate(-100px, 0);
transform: translate(-100px, 0);
}
100% {
-webkit-transform: translate(100px, 0);
transform: translate(100px, 0)
}
}
@-webkit-keyframes y {
25% {
-webkit-transform: translate(0, -50px);
transform: translate(0, -50px);
}
0%, 50%, 100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
75% {
-webkit-transform: translate(0, 50px);
transform: translate(0, 50px);
}
}
@keyframes y {
25% {
-webkit-transform: translate(0, -50px);
transform: translate(0, -50px);
}
0%, 50%, 100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
75% {
-webkit-transform: translate(0, 50px);
transform: translate(0, 50px);
}
}
Simpan kedua file tersebut dan jika digabungkan hasilnya akan seperti ini:
* {
box-sizing: border-box;
}
html,
body {
align-items: center;
background: linear-gradient(45deg, #d91e18, #9a12b3);
display: flex;
justify-content: center;
margin: 0;
min-height: 100vh;
padding: 0;
width: 100vw;
}
.wrapper {
position: absolute;
}
.wrapper:nth-of-type(2)>div {
height: 40px;
width: 40px;
opacity: 0.8;
}
.wrapper:nth-of-type(3)>div {
height: 30px;
width: 30px;
opacity: 0.6;
}
.wrapper:nth-of-type(4)>div {
height: 20px;
width: 20px;
opacity: 0.4;
}
.wrapper:nth-of-type(5)>div {
height: 10px;
width: 10px;
opacity: 0.2;
}
div>div {
background: #fff;
border-radius: 100%;
height: 50px;
margin: 40px;
width: 50px;
}
.wrapper {
-webkit-animation: x 1s ease-in-out alternate infinite 0s both;
animation: x 1s ease-in-out alternate infinite 0s both;
}
.wrapper > div {
-webkit-animation: y 1s linear infinite 0s both;
animation: y 1s linear infinite 0s both;
}
.wrapper:nth-of-type(2),
.wrapper:nth-of-type(2) > div {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.wrapper:nth-of-type(3),
.wrapper:nth-of-type(3) > div {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.wrapper:nth-of-type(4),
.wrapper:nth-of-type(4) > div {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.wrapper:nth-of-type(5),
.wrapper:nth-of-type(5) > div {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
@-webkit-keyframes x {
0% {
-webkit-transform: translate(-100px, 0);
transform: translate(-100px, 0);
}
100% {
-webkit-transform: translate(100px, 0);
transform: translate(100px, 0)
}
}
@keyframes x {
0% {
-webkit-transform: translate(-100px, 0);
transform: translate(-100px, 0);
}
100% {
-webkit-transform: translate(100px, 0);
transform: translate(100px, 0)
}
}
@-webkit-keyframes y {
25% {
-webkit-transform: translate(0, -50px);
transform: translate(0, -50px);
}
0%, 50%, 100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
75% {
-webkit-transform: translate(0, 50px);
transform: translate(0, 50px);
}
}
@keyframes y {
25% {
-webkit-transform: translate(0, -50px);
transform: translate(0, -50px);
}
0%, 50%, 100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
75% {
-webkit-transform: translate(0, 50px);
transform: translate(0, 50px);
}
}
<div class='wrapper'>
<div></div>
</div>
<div class='wrapper'>
<div></div>
</div>
<div class='wrapper'>
<div></div>
</div>
<div class='wrapper'>
<div></div>
</div>
<div class='wrapper'>
<div></div>
</div>
Langkah terakhir adalah, kunjungi melalui browser masing-masing dan lihat bagaimana hasilnya.
