CSS ANIMATION, CSS LOADING ANIMATION

CSS ANIMATION, CSS LOADING ANIMATION
.loading{width:30px;height:30px;border:3px solid:rgba(100,100,100,0.2); border-top-color:blue;} .loading::after{content:" ";}
lalu kita tambahkan border radiusnya agarmenjadi bulat .loading{width:30px;height:30px;border:3px solid:rgba(100,100,100,0.2); border-top-color:blue;border-radius:50%;} .loading::after{content:" ";}
lalu kita akam mencoba memberikan efek agar berputar .loading{width:30px;height:30px;border:3px solid:rgba(100,100,100,0.2); border-top-color:blue;border-radius:50%; -webkit-animation: putar 2s linear infinite;animation: putar 2s linear infinite;} .loading::after{content:" ";} -webkit-animation: putar 2s linear infinite;animation: putar 2s linear infinite; ini berfungsi mengatur kecepatan putar dari animasi tersebut pada 2s kita bisa merubah sesuai keinginan kita itu merupakan bahan utama untuk style atau bentuk dar animasi loadingnya;
sebelum melanjutkan kita perhatikan pada border-top-color:blue itu sebagau pembeda agara pada saat berputar nanti terlihat bergerak dengan adanya warna border yang berbeda. langkah terakhir adalah kita membuat scrip untuk membuat bergerak. pada script ini kita kita akan memanggil nama animasinya yaitu putar 2s linear infinite putar inilah yang akan kita panggil untuk di jalankan sebenarnya rata rata orang menggunakan nama spin tapi jika kita bisa membuatnya maka bebas apapun namanya asalkan kita bisa menerapkannya. OK lanjut membuat perintah animasinya Yang terakhir adalah @keyframes putar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ini merupakan perintah untuk memutar putar tadi dengan dimulai dari 0% { transform: rotate(0deg); menuju 100% { transform: rotate(0deg); yang artinya akan berputar dari 0 derajat menuju 360 derajat dalam waktu 2 detik 2s
untuk script penuhnya adalah <!DOCTYPE html> <html lang="ID"> <head> <title>Animasi loading buatanku</title> <style> .loading{width:30px;height:30px;border:3px solid:rgba(100,100,100,0.2); border-top-color:blue;border-radius:50%; -webkit-animation: putar 2s linear infinite;animation: putar 2s linear infinite;} .loading::after{content:" ";} @keyframes putar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <p>animasi loading</p> <div class="loading"></div> <div class="feed3"></div> </body> </html> lalu save dengan namafile.html lalu jalankan filenya melalui brorser kalian
Ditulis oleh: Admin

Tanggal: 03-08-2022 Pembaruan : 3 bulan lalu

 

Beri nilai


 
BAGIKAN :

Tinggalkan komentar

SEO HTML TAG, HEADING UNTUK SEO SEBUAH WEBSITE
SLIDE UP, CARA MEMBUAT EFEK SHOW DAN HIDE JQUERY
MENU DESAIGN LAYOUT, MEMBUAT MENU RESPONSIVE DENGAN MUDAH
GOOGLE REVIEW BUTTON, GOOGLE REVIEW BUTTON FOR WEBSITE

Galeri