Source Code

Cara Membuat Progress Bar Dengan HTML, CSS & JavaScript

Mandan Koding11 Oktober 20220

Selamat datang lagi di mandankoding.com. Kali ini kita akan berbagi tentang Cara Membuat Progress Bar Dengan HTML, CSS & JavaScript. Sebelumnya saya sudah berbagi tentang Membuat Landing Page Responsive Dengan HTML & CSS. Dan sekarang kita akan membuat Progress Bar.

Kamu dapat menonton video tutorial lengkap pada youtube (Progress Bar) di bawah ini.

Komponen Progress Bar memungkinkan kamu melihatkan suatu proses tertentu dengan pola persentase. Fungsi dari Progress Bar sangat lah penting dalam suatu website. dengan Progres Bar kamu bisa melihatkan kepada user suatu progress yang sedang berjalan seperti contohnya dalam meng upload data atau gambar, jadi user bisa melihat sudah berapa jauhkah progress data tersebut masuk atau tersimpan ke dalam website tertentu.

Tutorial Kami Lainnya.

Sekarang kita langsung saja, Untuk membuat program ini (Progress Bar). Pertama, Kamu perlu membuat dua File. Satu File HTML dan satu lagi adalah File CSS. Setelah membuat file-file ini cukup salin kode berikut di file kamu.

Pertama, buat file HTML dengan nama index.html dan salin kode ke dalam file HTML kamu. Ingat, kamu harus membuat file dengan ekstensi .html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>processing bar</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="processing">
        <div class="processing-bar" data-bar="85">
            Processing 85%
        </div>
    </div>

    <script>
        const processing = document.querySelector('.processing-bar');

        setTimeout(() => {
            processing.style.opacity = 1;
            processing.style.width = processing.getAttribute('data-bar') + '%';
        }, 500)
    </script>
</body>
</html>

Kedua, buat file CSS dengan nama style.css dan salin kode kedalam file CSS kamu. Ingat, Anda harus membuat file dengan ekstensi .css.

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

.processing {
    background-color: lightgray;
    height: 50px;
    width: 500px;
    border-radius: 20px;
}

.processing-bar {
    background: linear-gradient(to left, #ac0151, #f88080);
    height: 100%;
    width: 0;
    opacity: 0;
    color: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 3px 3px -5px #70f2e7, 0 2px 5px #7088f2;
    transition: 1s ease;
}

Itu saja, sekarang kamu telah berhasil Membuat Progress Bar menggunakan HTML CSS & JavaScript. Jika kode kamu tidak berfungsi atau kamu menghadapi kesalahan/masalah, silakan tinggalkan pesan di kolom komentar.