Cara Membuat Progress Bar Menggunakan Javascript

Cara Membuat Progress Bar Menggunakan Javascript

Tutorial kali ini kamu akan belajar bagaimana cara membuat progress bar menggunakan javascript dan CSS. Biasanya progress bar digunakan untuk pencapaian tugas yang  pengguna kerjakan. Kamu dapat melihat hasil dan kodingannya pada link dibawah.

Koding lengkap Cara Membuat Progress Bar Menggunakan Javascript

See the Pen Progress Bar by Bier Pinter (@Bierpinter) on CodePen.

https://production-assets.codepen.io/assets/embed/ei.js

Ini gambar hasil koding diatas:

Cara Membuat Progress Bar Menggunakan CSS dan Javascript

Gambar 1.1 – Progress Bar

Langkah awal, desain dulu progress dan bar dengan menambahkan lebar progress 90%, artinya panjang progress itu 90% dari luas kotak container (lihat koding class kontainer). Beri style di bar lebarnya 0%, artinya bar dimulai dari nol dengan warna background merah muda.

Nanti, jika user mengklik tombol show progress, maka bar dan jumlah persen mulai berjalan dari nol hingga menutupi seluruh area id progress.

Setelah itu, desain tombol progress-nya. Yang memberi efek tombol ketika ditekan seperti menekan tombol remote adalah karena di css diberi style transform: translate Y(2px); dan box shadow : 0 0; agar efek bayangan hilang ketika ditekan.

Langkah terakhir kita berikan javascript. Koding javascript ini yang membuat progress bar dan jumlah persennya sama-sama bergerak. Kalian bisa mengubah setInterval sesuai kemauan kalian. Semakin besar setIntervalnya pergerakan menjadi semakin lambat.

Baca juga: Cara Membuat Form Login Pada Website

Demikian tutorial Cara Membuat Progress Bar Menggunakan Javascript. Kamu dapat melihat hasil progress barnya di codepen.

Tinggalkan Balasan