Antarmuka pengguna (UI) yang mengukur kemajuan sangatlah membantu. Antarmuka ini menawarkan konfirmasi visual saat menyelesaikan berbagai tugas, sehingga pengguna tidak perlu menebak-nebak seberapa jauh mereka telah menyelesaikan suatu proses.
Kita melihat UI ini di perangkat kita. Siapa pun yang melakukan pembaruan di komputer atau ponsel mereka pasti sudah familier dengan UI ini. Jadi, mudah untuk menganggap remeh desainnya.
Namun, kami mulai melihat implementasi yang lebih kreatif. Dan web telah menjadi kekuatan pendorong. Desainer menggunakan CSS dan JavaScript untuk membuat UI progres menjadi menyenangkan dan informatif. Dengan menambahkan animasi unik dan visual lainnya, kami telah melampaui bilah progres standar.
Berikut ini delapan bilah kemajuan dan UI yang menawarkan sesuatu yang unik. Anda mungkin akan terkejut melihat seberapa jauh elemen-elemen ini telah berkembang.
Diagram Batang Kemajuan Setengah Lingkaran Animasi Menggunakan SVG oleh Andrew Sims
Kami tidak selalu mengukur kemajuan dalam garis lurus. Anda juga dapat menggunakan bentuk seperti setengah lingkaran yang indah ini. Cuplikan tersebut menggunakan ProgressBar.js dan SVG untuk membuat presentasi yang menarik.
Lihat Pena Grafik batang kemajuan setengah lingkaran animasi menggunakan SVG oleh Andrew Sims
Unduhan Animasi CSS & Animasi Kemajuan oleh Aaron Iker
Pengguna menghabiskan banyak waktu mengunduh berkas. Pengukur kemajuan membuat mereka tetap mengetahui statusnya. Kami senang bahwa contoh ini membuat semuanya tetap sederhana. Satu tombol menampung semua informasi yang dibutuhkan pengguna.
Lihat Pena Unduh animasi kemajuan oleh Aaron Iker
Animasi Bilah Kemajuan oleh Eva Wythien
Siapa bilang bilah kemajuan harus membosankan? Berikut ini adalah cara bagaimana kreativitas dapat membuat sesuatu menjadi lebih menarik. Animasi keyframe CSS, pola, dan gradien menambah keseruan dalam prosesnya.
Lihat Pena Animasi bilah kemajuan oleh Eva Wythien
Jam Kemajuan CSS & JavaScript oleh Jon Kantner
Waktu adalah cara lain untuk mengukur kemajuan, dan jam ini melakukannya dengan cara yang unik. Arahkan kursor ke tanggal, jam, menit, dan detik untuk fokus pada pengukurnya. Efek ini mengambil UI yang kompleks dan membaginya menjadi potongan-potongan kecil.
Lihat Pena Jam Kemajuan oleh Jon Kantner
Langkah-Langkah Proses Pemesanan Hanya CSS oleh Jamie Coulter
Berikut ini cara yang menyenangkan untuk menunjukkan kepada pengguna langkah-langkah dalam proses e-commerce. Mengklik suatu langkah akan menampilkan detail lebih lanjut. Perhatikan bagaimana ikon kotak berubah selama prosesnya. UI ini menunjukkan kemajuan dan berfungsi ganda sebagai komponen orientasi.
Lihat Pena Langkah-langkah proses pemesanan CSS saja oleh Jamie Coulter
Bilah Kemajuan Pembungkus Layar oleh Thomas Vaeth
UI Progress juga dapat berbasis gulir. Dalam kasus ini, bilah berwarna akan membungkus area pandang saat Anda menggulir. Efeknya akan berbalik saat Anda kembali ke atas. Mungkin contoh ini tidak cocok untuk setiap kasus penggunaan. Namun, ini dapat menjadi pelengkap situs web penceritaan.
Lihat Pena Bilah Kemajuan yang Berputar oleh Thomas Vaeth
Bilah Kemajuan Lingkaran Responsif oleh Tigran Sargsyan
Cuplikan ini menggunakan Input rentang HTML yang sinkron dengan UI progres melingkar. Bentuknya membuat yang ini menonjol. Namun demikian pula efek perubahan warnanya. Saat nilai slider berubah, demikian pula warnanya.
Lihat Pena Kemajuan lingkaran oleh Tigran Sargsyan
Bilah Kemajuan 3D yang Berputar oleh Amit
Berikut ini sesuatu yang berbeda. Bilah kemajuan 3D yang berputar ini memberikan tampilan futuristik. Selain itu, bilah kemajuan ini sepenuhnya dibuat dengan CSS, dan pasti akan menarik perhatian.
Lihat Pena bilah kemajuan 3d v2 oleh Amit
Kemajuan Lebih Baik Melalui Kode
Tidak ada alasan untuk puas dengan UI progres lama. Kini Anda dapat membuat sesuatu yang sesuai dengan estetika yang Anda inginkan. Dan yang terbaik, Anda tidak memerlukan banyak kode atau gambar yang rumit. Buat elemen-elemen ini sesederhana atau serumit yang Anda inginkan.
Contoh-contoh di atas menunjukkan berbagai kemungkinan. Namun, itu baru sebagian kecil saja. Gabungkan CSS, JavaScript, dan imajinasi untuk menciptakan tampilan dan nuansa yang berbeda.
Apakah Anda mencari contoh UI progres lainnya? Anda dapat melihat Koleksi CodePen!
Atas
