cara membuat animasi preloader dengan css3

Cara Membuat Animasi Preloader Dengan CSS3


Cara Membuat Animasi Preloader Dengan CSS3

Cara Membuat Animasi Preloader Dengan CSS3 – Terima kasih sebelumnya saya ucapkan kepada teman-teman yang sudah membaca tutorial-turoial pemrograman di malasngoding.com. khususnya tutorial membuat animasi preloader dengan css3 ini. sebenarnya saya agak bingung sih mau ngupdate tutorial apa lagi di malasngoding.com. teman-teman kalau ada yang mau request tutorial pemrograman bisa menghubungi saya melalui facebook. kebingungan saya hilang saat saya googling. dan menemukan tutorial yang saya rasa cocok untuk di angkat di www.malasngoding.com. yaitu tutorial cara membuat efek animasi preloader dengan css3.

Di tutorial ini akan saya jelaskan tentang cara membuat efek animasi yang bentuknya seperti efek loading. tutorial ini saya kutip dari website ternama. yaitu medialoot.com. jadi saya akan mencoba menjelaskan secara terperinci tentang komponen-komponen pembuatan preloading dengan css3. karena saya lihat di medialoot sendiri tidak menjelaskan secara terperinci. tapi yang penting terima kasih banyak juga untuk medialoot.com karena sudah bersedia membagikan ilmunya kepada kita secara gratis.

Cara Membuat Animasi Preloader Dengan CSS3

Akan langsung kita masuk ke cara membuat efek preloader dengan css3. di sini ada beberapa buah efek animasi yang di buat. dan akan kita jelaskan satu persatu. oh iya kalau teman-teman berkenan hatinya, mohon share tutorial ini. agar teman-teman yang lain juga bisa membaca tutorial ini. dan semoga pahala untuk saling berbaginya bisa berlipat ganda. biar cepat masuk surga. hehe..

Animasi preloader 1 – Double Spinner

Langsung saja.

HTML

CSS

dan hasilnya

cara membuat animasi preloader dengan css3

cara membuat animasi preloader dengan css3

akan saa jelaskan sedikit. intinya ada di element span. ada dua buah span. dan keduanya di jadikan sebagai efek yang melingkar membentuk animasi loading seperti pada hasilnya.

perhatikan pada syntax di atas.

di gunakan untuk memilih span yang pertama pada css. dan

untuk memilih span yang kedia. :nth-child() berfungsi untuk memilih element HTML berdasarkan turunan elament induk(child).

lalu kemudian kedua span tadi di berikan efek css3

transform rotate() sudah kita bahas pada tutorial css3 di malasngoding.com. rotate() berfungsi untuk memutar element dengan css3.

contohnya.

persen yang ada di atas untuk menentukan waktu dari animasi. berarti dari 0  opacity/ketransparannannya di setting senilai 1. dengan putaran sebesar 360 derajat. dan pada pertengahan animasi atau 50% putarannya berubah menjadi 180 derajat. dan yang terakhir dari 50 sampai 100 persen atau selesai putaran di kembalikan ke nilai 0 derajat.

FULL SOURCE

See the Pen Membuat animasi preloader dengan css3 by Malas Ngoding (@malasngoding) on CodePen.0

Animasi preloader 2 – Crossing Circle

Sesuai dengan nama preloader animation ini (crossing circle). animasi preloader ini berbentuk dua lingkaran kecil yang saling bersebrangan. oke kita lihat langsung source code nya ya.

HTML

CSS

See the Pen Preloader animasion css3 by Malas Ngoding (@malasngoding) on CodePen.0

Membuat animasi crossing circle ini juga menggunakan 2 buah element span. tapi sudah di buat dalam bentuk lingkaran(perhatikan syntax css di atas).

jika animasi preloader yang pertama di buat dengan rotate() untuk membuat element berputas, animasi preloader yang kedua ini di buat menggunakan bantuan syntax translate css3. transform translate css3 juga sudah kita pelajari pada tutorial sebelumnya di malasngoding.com. Cara Membuat Animasi Preloader Dengan CSS3

FULL SOURCE

 

Animasi Preloader 3 – Circle Rotator

Cirlce Rotator adalah animasi preloader yang membentuk lingkaran yang berputar. sama seperi animasi preloader yang pertama kita bahas. bedanya circle rotator hanya memiliki satu garis.

HTML

CSS

dan hasilnya.

membuat animasi preloader dengan css3

membuat animasi preloader dengan css3

intinya perhatikan pada

element di putar dengan 360 derajat secara berulang-ulang.

FULL SOURCE

 

See the Pen membuat preloader animation with css3 by Malas Ngoding (@malasngoding) on CodePen.0

Oke teman-teman. mungkin sekian saja tutorial Cara Membuat Animasi Preloader Dengan CSS3. semoga dapat bermanfaat untuk orang banyak. terima kasih banyak. jangan lupa di share ya.

Incoming search terms:

  • cara membuat preloader sendiri css3
  • membuat animasi css




About the author
Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • No Comment

Write a Comment

Your email address will not be published. Required fields are marked *