Membuat Animasi Loading Keren Google
Membuat Animasi Loading Keren Google ~ Pada Tutorial kali ini saya membahas bagaaimana cara membuat animasi loading layaknya google. Nah tutorial kali ini kita akan menggunakan properti dari CSS3 untuk pembuatan animasi tersebut yaitu kita menggunakan animation dan @keyframes. Animasi Loading Keren Google ini nantinya akan bergerak naik turun seperti ombak. Ok Langsung saja teman-teman perhatikan langkah pembuatan loading dibawah :
1. Langkah yang pertama silahkah buat dulu kode htmlnya seperti berikut atau langsung saja copas ke text editor :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Animasi Spinner With CSS3</title> <link rel="stylesheet" href="Assets/css/style.css"> </head> <body> <h3>Animasi Loading Keren Google</h3> <div class="circle"> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>
2. Langkah yang kedua silahkah buat kode cssnya seperti berikut dan berinama style.css :
*{
margin: 0 auto;
font-family: Tahoma;
}
h3 {
text-align: center;
padding: 10px;
background-color: #4199e6;
color: white;
font-size: 40px;
}
/*animation loading google*/
.circle {
top: 100px;
position: relative;
width: 30%;
}
.circle span{
position: absolute;
content: '';
height: 50px;
width: 50px;
border-radius: 50%;
}
.circle span:nth-child(1){
background-color: #589ac4;
left: -40px;
animation: circle 2s ease-in-out infinite;
}
.circle span:nth-child(2){
background-color: #e93535;
left: 20px;
animation: circle 2s ease-in-out .20s infinite;
}
.circle span:nth-child(3){
background-color: #f5db00;
left: 80px;
animation: circle 2s ease-in-out .40s infinite;
}
.circle span:nth-child(4){
background-color: #23af71;
left: 140px;
animation: circle 2s ease-in-out .60s infinite;
}
@keyframes circle{
0%,100%{transform: translateY(-50px)}
50%{transform: translateY(50px)}
}
3. Yang terakhir, silahkan simpan dan lihat hasilnya. Jika sudah tampil maka tampilannya seperti dibawah ini :
Bagi teman-teman yang ingin download source kodenya silahkan klik tombol download dibawah ini :
Untuk mempermudah proses pembelajaran saya menyertakan video untuk kalian download atau tonton langsung di youtube saya berikut :
Sekian dulu ya teman,Semoga tutorial dari saya bermanfaat untuk kalian semua dan saya ucapkan terima kasih .
Comments
Post a Comment