Web Tutorial
Now Reading
Cara Membuat Progress Bar Menggunakan Javascript
0

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.

#progress {
  width: 90%;
  background-color: #ddd;
  box-shadow: 0px 3px#e8e5e5;
}

#bar {
  width: 0%;
  height: 35px;
  background-color: #ed49a3;
  box-shadow: 1px 3px #ef349b;
  text-align: center;
  line-height: 35px;
  color: #fff;
  font-weight: 900;
}

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.

button{
  border: none;
  padding: 8px;
  border-radius: 3px;
  box-shadow: 2px 3px #827c7c;
  color: #474545;
  cursor: pointer;
  outline: none;
 
}

button:active{
    transform: translateY(2px);
    box-shadow: 0 0;
}

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

function move() {
  var dwn = document.getElementById("bar");   
  var width = 1;
  var id = setInterval(frame, 50);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      dwn.style.width = width + '%'; 
      dwn.innerHTML = width * 1  + '%';
    }
  }
}

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

What's your reaction?
Luar Biasa
0%
Suka Sekali
0%
Keren
0%
Kagum
0%
Jelek
0%
Tidak Suka
0%
About The Author
Isak Mandala

Leave a Response