Advertisement
  1. Web Design
  2. CSS3

Membuat Koleksi Pre-loader CSS3 Teranimasi

by
Read Time:8 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Baba Baddolo (you can also view the original English article)

Pre-loader adalah hal yang biasa terlihat pada desain web modern.  Sebagai pengguna, kita mengharapkan sebuah website bersifat cepat dan mengalir- kita tidak suka menunggu terlalu lama.  Pre-loader menawarkan umpan balik visual pada keadaan ketika konten sedang dimuat, hal tersebut akan menjaga harapan dan mengurangi kemungkinan pengguna meninggalkan website kita.

Hal-hal Penting CSS3 untuk Membuat Pre-loader

Sebelum kita menyelami lebih dalam dalam membangun koleksi pre-loader CSS3 kita, pertama saya akan mendiskusikan beberapa atribut CSS3 yang penting untuk membuat pre-loader tipe ini.

Elemen Pseudo :sebelum :sesudah

Elemen pseudo sangatlah berguna dalam membantu membuat pre-loader CSS3.  Elemen pseudo secara esensi membuat elemen imitasi sebelum atau sesudah elemen HTML dimulai.

“Pseudo berasal dari bahasa Yunani dari kata pseudēs yang berarti palsu.”  

Hal ini serupa dengan membuat elemen tambahan yang tidak benar-benar ada, bagaimanapun elemen pseudo dapat di-style menggunakan CSS.  Elemen pseudo ini tidak begitu diperlukan untuk membuat pre-loader CSS3, tetapi elemen ini sangat berguna dan dapat membantu kita menggunakan markup yang lebih sedikit.

Elemen pseudo dapat di-style dengan cara yang sama persis dengan elemen HTML manapun yang Anda inginkan, perbedaannya hanyalah Anda harus menspesifikkan property konten .  Tanpa membuatnya spesifik elemen pseudo ini tidak akan terbuat.  Properti konten dapat berisi teks apapun yang mungkin berguna jika pre-loader Anda perlu mengandung kata-kata seperti “Loading…”, bagaimanapun, jika Anda tidak memerlukan konten teks maka Anda dapat meninggalkan properti konten kosong.

Anime CSS3

Elemen pseudo CSS sangatlah berguna tetapi tidak begitu esensial untuk membuat pre-loader CSS3, tetapi properti animasi sangat membutuhkannya.  Tanpa itu, pre-loader akan gagal menganimasikannya dan hanya akan menjadi visual statis-tidak begitu berguna untuk mengindikasikan bahwa konten sedang memuat.

“Komponen utama dari animasi CSS adalah @keyframes, CSS mengatur di mana animasi dibuat.  Pikirkan @keyframes sebagai tahapan timeline. Di dalam @keyframes,  Anda dapat menentukan tahpan-tahapan tersebut, masing-masing memiliki model deklarasi yang berbeda. ” – Pengantar Pemula pada Animasi CSS 

Catatan: sebelum kita melompat pada demo, mungkin perlu untuk dicatat bahwa prefiks vendor tidak termasuk dalam potongan kode di bawah ini.  Jika Anda membutuhkan prefiks vendor maka silakan lihat contoh-contoh codepen vendor.

1. Gelombang Audio

Ide di balik pre-loader ini adalah untuk membuat animasi yang mirip dengan gelombang audio.

HTML 

Hal ini dapat dicapai dengan membuat lima bentang, masing-masing merepresentasikan audio bar.

CSS 

Efek ini dapat dicapai dengan menganimasikan ketinggian masing-masing bentang dari 5px hingga 30px.  Bentangan juga akan turun ke sumbu Y 15px untuk memberikan efek yang bertumbuh dari tengah.

Oleh default animasi masing-masing bentang akan terjadi bersamaan.  Efek Mexican wave diciptakan dengan menambahkan animation-delay pada masing-masing bentang dengan offset 2 milidetik.  Masing-masing bentang ditargetkan menggunakan selektor nth-child().

2. Persegi Sirkular

Pre-loader ini menggunakan empat persegi yang bergeser, berputar, berubah warna, dan menjadi lingkaran.

HTML 

Ini dibuat dengan menggunakan empat bentang.  Masing-masing adalah lingkaran/persegi dan memiliki animasinya masing-masing yang diterapkan.

CSS 

Keempatnya berubah dari persegi menjadi lingkaran dengan mengatur radius-batas tepi dari 0px (persegi) menjadi 20px (lingkaran).

Masing-masing jgua berputar dan berpindah sepanjang sumbu X & Y ke arah berlawanan dari posisi asalnya.  Warna dari masing-masing bentang juga teranimasikan dari seluruhnya ungu menjadi warnanya masing-masing.  Hal ini memberikan kesan bentuk-bentuk ini bergabung dari beberapa lingkaran menjadi satu persegi.

3. Bentuk Menyilang

Pre-loader bentuk menyilang adalah satu div yang memanfaatkan elemen pseudo:sebelum dan:sesudah yang kita bicarakan sebelumnya.

 HTML 

CSS 

Satu animasi diletakkan pada #preloader_3:before dan satu lagi pada #preloader_3:after.  Masing-masing animasi berubah menjadi warna yang berbeda pada waktu yang berlawanan.  Serupa dengan pre-loader sebelumnya, masing-masing elemen pseudo berubah daru lingkaran menjadi persegi dengan menanimasikan properti border-radius.

4. Ular/the Snake

The Snake/Ular terbuat dari koleksi bentang yang masing-masingya mendapatkan style dari lingkaran.

HTML 

Berikut adalah markupny, tetapi Anda dapat selalu mencoba membuat pre-loader ular dengan tiga lingkaran dan daripada memiliki beberapa bentang cukup gunakan #preloader_4  div dengan :sebelum dan :sesudah

CSS 

Animasi dibuat dengan mengubah posisi Y dari masing-masing animasi -10px dan mengubah warna dari biru menjadi kuning.  Untuk membuat efek bayangan bawah, sebuah drop shadow ditambahkan pada masing-masing bentang yang akan mengubah ukuran bayangan vertikal dari 0px menjadi 20px.

Mirip dengan pre-loader 1, dengan menambahkan animation-delay pada masing-masing bentang dan offset penundaan bentang sebanyak 2 milidetik maka ia akan menciptakan efek gelombang.

5. Disc Berputar

Ini... adalah sesuatu yang berputar.

HTML 

Di sini kita cukup menggunakan div tunggal untuk lingkaran tengah dan :after pada div tersebut untuk membuat garis luar.

CSS 

Menambahkan garis tepi pada bagian atas dan bawah serta memberikan radius-border  50px menciptakan dua garis luar.  Sebuah animasi ditambahkan pada div utama, hanya untuk mengubah warna div dan membuat efek berputar dengan menambahkan transform: rotate() .  Elemen animasi :after ditambahkan untuk mengubah warna dari garis tepi luar. 

6. Jendela Berkilau

Kita menjadi sedikit Microsoft pada bagian ini…

HTML 

Pre-loader ini dibuat menggunakan sebuah dic dan empat bentang untuk membaut persegi.

CSS 

Persegi ini kemudian diletakkan pada sebuah urutan seperti grid.  Animasi ditambahkan pada div utama untuk memutar seluruh pre-loader.  Animasi lainnya juga ditambahkan pada bentang yang mengukur mereka dari 100% menjadi 50%.  Kita kemudian menambahkan animation-delay  pada masing-masing bentangan untuk membuat efek berdetak.

Kesimpulan 

Keuntungan yang hebat tentang menggunakan pre-loader CSS3 daripada gambar pre-loader adalah mereka dapat diukur dan siap secara retina.  Ini berarti, tidak peduli pada perangkat apa ditampilkan, mereka akan selalu segar, bersih, dan tahan lama (walau selalu ingat bahwa tidak semua browser yang ada mendukung animasi CSS).

Dengan memahami beberapa properti pentingCSS3 dan tekniknya Anda harusnya sekarang dapa tmembuat pre-loader CSS3 Anda sendiri.  Menyenangkan dalam membuatnya dan dengan sedikit eksperimen Anda dapat membuat animasi yang sangat keren untuk mencegah pengguna meninggalkan website Anda.

Jika Anda telah membuat beberapa pre-loader yang keren belakangan ini, maka saya ingin melihatnya!  Silakan tinggalkan komentar Anda di bawah sini.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.