Membuat Animasi Progress Bar Dengan CSS3

Membuat Animasi Progress Bar Dengan CSS3

Membuat Animasi Progress Bar Dengan CSS3 – Teknik desain ini umumnya ditemukan pada portofolio pribadi atau website desain studio. Progress bar mewakili tingkat pengetahuan yang berkaitan dengan tugas-tugas tertentu seperti web desain, ilustrasi, branding, desain karakter, dan apapun itu terserah Anda akan memberikan label seperti apa! Menambahkan beberapa animasi mewah untuk Progress bar ini akan memberikan koneksi yang lebih cepat ketika ditampikan.

Dalam tutorial ini saya ingin menunjukkan bagaimana Anda dapat membangun Progress bar menggunakan animasi dengan CSS3 keyframe. Hal ini benar-benar memungkinkan untuk menjalankan animasi menggunakan JavaScript, yang akan tahan lebih kuat pada browser web pada versi terdahulu. Namun keyframes CSS3 tumbuh dalam popularitas dengan lebih luas dan mendukung sampai hari ini. Silahkan anda cona pada live demo saya untuk melihat produk akhir.

Mulai Membuat

Saat browsing melalui Google saya menemukan secara kebetulan ke posting ini. Artikel tersebut menguraikan tentang style animasi CSS3. Ini sebenarnya cukup sederhana setelah Anda memahami sifat dan bagaimana animasi/keyframes bekerja sama. Halaman saya menggunakan HTML5 DOCTYPE sederhana dengan stylesheet CSS eksternal tunggal.

Pertama kita harus melihat pada markup HTML dan bagaimana ini membangun sebuah bar yang dinamis aktif. Halaman ini mencakup dua bagian yang berbeda yaitu satu dengan label dalam dan satu tanpa label. Karena semua Progress bar menggunakan kode hampir identik, saya sudah menyalin kode tersebut namun hanya bar pertama pada halaman tersebut.

Pada div dengan kelas .progressset digunakan untuk merangkum seluruh koleksi Progress bar. Ini memiliki sifat seperti wrapper sehingga kita bisa memusatkan segalanya, peningkatan/penurunan lebar, atau menyesuaikan pengaturan lain di CSS. Div Sebelah dalam dengan kelas .progress membungkus di sekitar setiap Progress bar yang diukur. Dalam hal ini kita sedang melihat HTML5 / CSS3 coding yang peringkat di% pengetahuan 100.

Tempat Sebelah dalam adalah Header H3 sehingga pengunjung dapat memberitahu keterampilan apa yang dimiliki dan seberapa tingkatanya. Hal ini dapat ditempatkan di dalam Progress bar pada sebaliknya, tapi saya memilih untuk menempatkan tahun pengalaman di dalam bar. Anda akan melihat animasi bar itu terkandung dalam kulit terluar.

Pada span elemen dengan kelas .bar menggunakan latar belakang abu-abu statis dengan beberapa efek bayangan kotak untuk menonjol pada halaman. Itu dirancang dengan cara yang sama seperti contoh CSS Deck, tapi saya sudah mencoba untuk menyederhanakan HTML sedikit. Sebelah dalam rentang .progress-bar adalah di mana animasi terjadi.

Membuat Animasi Progress Bar

Anda akan melihat setiap .progress-bar juga memiliki kelas menengah yang berhubungan dengan Progress bar yang diukur. Ini melekat pada CSS3 animasi yang berjalan di atas keyframes. Setiap Progress bar diukur secara terpisah dan mereka masing-masing berhenti pada titik yang berbeda (HTML/CSS hanya terjadi untuk mencapai 100%).

Tutorial lainya   Tutorial Membuat Shortcode pada Wordpress

Karena saya menggunakan kelas untuk Progress bar ini kita benar-benar dapat menduplikasi mereka berkali-kali pada halaman. Ini adalah bagaimana saya membuat satu set contoh pada halaman yang sama dengan menggunakan kembali kelas animasi yang sama. Sejak Progress bar ini terdapat juga potongan-potongan kecil teks, mereka tidak bisa berawal dari nilai 0px pada lebar(width). Biasanya ini akan berjalan baik-baik saja tetapi dalam kasus ini teks akan mematahkan ke baris berikutnya, dan hanya sekali membuat animasi Progress bar pada reposisi teks itu sendiri.

Ketika memiliki kelas individu berarti saya bisa setup lebar asli untuk mencocokkan panjang teks internal. Cara ini tidak pernah istirahat atau muncul kereta, dan teks selalu tetap berpusat di bar keterampilan tidak peduli seberapa lebar itu menjadi animasi.

Posisi Elemen

Sifat CSS dasar dari saya tidak terlalu rumit tetapi ada beberapa ide yang mungkin layak membahas. Saya akan mulai dengan struktur keseluruhan dari kontainer Progress bar tersebut.

Pada luar div dengan kelas .bar kontainer menggunakan nilai width/height tetap untuk memastikan semuanya terlihat sama di semua browser. Sebelah dalam pada div dengan kelas .progress-bar tidak menyimpan nilai tinggi dengan teks, tetapi dalam contoh kedua, elemen-elemen span tidak akan muncul karena mereka benilai kosong. Kita perlu menggunakan height dengan nilai 100% pada semua progress bar yang internal untuk memastikan mereka muncul bahkan tanpa konten apapun.

Tutorial lainya   Membuat Gradient Background dengan gradStop.js

Efek teks center juga cukup keren karena kandungan internal yang akan menghidupkan bersama dengan bar itu sendiri. Anda mungkin tidak suka dengan efek seperti ini, namun itu cukup sederhana untuk mengubah animasi supaya terjadi keselarasan. Tetapi jika Anda mempertimbangkan bagaimana ini semua adalah mudah untuk dikerjakan, Anda mungkin mulai mendapatkan pengalaman dengan konsep baru untuk mencoba.

Membuat Fill Mode

Ketika saya pertama kali mulai untuk memberi animasi pada elemen, setiap bar akan menyelesaikan animasi tersebut, maka secara otomatis kembali ke resor dengan width 100%. Ini jelas bukan niat saya, jadi saya pergi mencari solusi.

Saya membaca bahwa kita dapat mengatur lebar default pada kelas yang asli seperti .htmlcss sehingga berakhir pada posisi width dengan nilai 100% setelah animasi dilakukan atau dalam kasus kelas dengan jQuery akan membutuhkan posisi width dengan nilai 55%. Saya merasa ini hampir menggagalkan tujuan karena harus menyalin nilai width dua kali. Dari sini saya tahu tentang Fill Mode adalah sesuatu yang belum pernah dengar sebelumnya, karena mungkin pengalaman saya masih kurang.

Fill Mode memberitahu animasi bagaimana memanfaatkan style sebelum & setelah selesai bekerja. Menggunakan kata kunci depan akan memaksa setiap elemen untuk mempertahankan style CSS yang akan ditemukan pada keyframe terakhir. Jadi dalam hal ini kita akan menjalankan animasi yang berbeda untuk masing-masing kelas dan masing-masing animasi memiliki posisi awal 0% diikuti oleh posisi selesai 100%. Saya tidak pernah tahu setelah animasi selesai itu akan kembali ke style asli.

Jika Anda ingin membaca sedikit lebih lanjut pada Fill mode silahkan baca artikel ini Oleh Mozilla yang menggali lebih rinci. Konsep ini sangat sederhana, tapi saya bisa mengerti bagaimana pengembang baru akan mencoba CSS3 animasi keyframe tidak akan tahu apa-apa tentang hal itu.

Tutorial lainya   Tutorial Membuat Navigasi Tab yang Responsif

Menyelesaikan Keyframes

Blok terakhir dari kode saya adalah keyframes itu sendiri. Kami memberikan nama yang unik yang diwakili oleh lebih awal setiap pengaturan keyframe animation properti. Saya menggunakan prefiks CSS3 untuk moz dan WebKit untuk menangani kepatuhan dengan sebanyak Browser versi mungkin. Anda akan melihat animasi dibagi menjadi blok dikelompokkan dengan nama animasi:

Anda juga akan melihat setiap animasi hanya menggunakan posisi awal dan posisi selesai, yang semuanya harus menjiwai dalam waktu 1,5 detik. Beberapa posisi awal menggunakan 35px atau 45px untuk sepenuhnya merangkum teks label. Anda bisa mengubah nilai ini ke 0px jika Anda tidak ingin teks yang ditemukan dalam Progress bar itu sendiri.

Selain style ini, segala sesuatu yang lain harus cukup terkenal. Bagian besar terakhir di stylesheet saya mengubah gradien Sebelah dalam untuk setiap batang keterampilan – tanpa label Anda dapat mencoba menggabungkan warna untuk membedakan antara keahlian. Inilah sebabnya mengapa progress bar sekunder juga mencakup .alt kelas.

Penutupan

Ada banyak tutorial fantastis lain di luar sana yang meliputi topik ini dan animasi keyframe lainnya. Banyak contoh kode besar dapat ditemukan di situs-situs seperti CodePen dan JSFiddle jika Anda punya waktu untuk mencari. Kedua contoh saya dengan label teks dalam, atau hanya persentase standar, dapat bekerja dalam setiap desain website yang sama.

Jadilah kreatif dengan animasi ini untuk melihat bagaimana mereka bisa masuk ke dalam proyek-proyek web lainnya di masa depan. Anda juga dapat men-download kode sumber tutorial saya dan mencoba membangun keluar animasi yang lebih kompleks.

Progress Bar CSS3 Demo
Penulis Tutorial

Penulis Tutorial

Kata terindah

Satu komentar pada "Membuat Animasi Progress Bar Dengan CSS3"

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *