CSS3 dilengkapi dengan kemampuan melakukan animasi, dari yang sederhana, hingga kompleks. Dan dengan pseudo-elements, kita bisa menambahkan komponen tanpa harus memberikan tag HTML tambahan. Situs Geek Natural, tidak ada animasi tetapi dilakukan dengan baik dengan bantuan HTML. Kali ini, saya ingin memberikan contoh membuat animasi loading sederhana, dengan fitur animasi dari CSS3, dan pseudo-element ::before dan ::after.
Berikut demo nya,
Animasi loading akan dimunculkan, pada element #banner-message.loading, atau sebuah element yang memiliki id banner-message dan class css loading, dan untuk mendemonstrasikan dinamisasi efek loading, saya menggunakan bantuan jQuery untuk mengatur, diberikan, atau dihilang class loading tersebut.
Pseudo-element yang digunakan adalah
::before
Yang diposisikan secara absolute, dengan lebar dan tinggi mengikuti elemen induknya, sehingga terkesan memenuhi seluruh bidang. Kemudian diberikan warna latar untuk menutupi konten elemen induk nya.
::after
Juga diposisikan secara absolute, namun, dibuat dengan ukuran tertentu (48 pixel), dan diletakkan di tengah tengah bidang elemen induknya. Teknik untuk menempatkan elemen dengan posisi absolute agar berada di tengah tengah induknya adalah dengan meletakkan element tersebut di titik tengah posisi horizontal (X) dan vertikal (Y), hal ini dengan properti CSS top dan left, dan dikombinasikan dengan mengubah letak elemen agar berpindah X dan Y sebanyak 50% (setengah tinggi dan setengah lebar) ke arah negatif, dengan properti css transform: translate(x, y).
Kemudian, diberikan border, dengan border-radius, sehingga memberikan kesan lingkaran. Terakhir, diberikan animasi, yang mana animasi ini melakukan perubahan rotasi dari 0 hingga 360 derajat (CSS property transform: rotate), alias berputar 1 lingkaran penuh. Animasi ini dijalankan tanpa henti, dengan durasi 0.5 detik untuk setiap 1 putaran, dan dengan kecepatan linear (durasi dibagi rata). Perhatikan CSS animation: spin .5s linear infinite.