Cara Membuat Progress Bar Dengan CSS dan Javascipt

codepoin - kali ini saya akan membagikan tutorial tentang Cara Membuat Progress Bar Dengan CSS Dan Javasciript ,nah sudah kebayang bukan dari judul nya saja progress bar berfungsi untuk memberitahu user apabila belum ada data yang terisi penuh di field database dalam dunia website progress bar meruapakan elemen yang sangat penting karena akan menambah UI/UX dalam sebuah halaman website kita biar terlihat interkatif apalgi jika di tambah dengan jquery tentu saja akan sangat memperindah halaman website kita langsung saja

TUTORIAL
silahkan teman-teman buat markup html nya terlebih dahulu
lalu copas sintaks di bawah ini di antara <body> dan </body>

lalu kalian tambahkan style css nya
copas

.progress {
width: 100%;
height: 50px;
}

.progress-wrap {
background: #f80;
margin: 20px 0;
overflow: hidden;
position: relative;
}
.progress-wrap .progress-bar {
background: #ddd;
left: 0;
position: absolute;
top: 0;
}

setelah itu copas javascript di bawah ini di atas </body>

// on page load...
    moveProgressBar();
    // on browser resize...
    $(window).resize(function() {
        moveProgressBar();
    });

    // SIGNATURE PROGRESS
    function moveProgressBar() {
      console.log("moveProgressBar");
        var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
        var getProgressWrapWidth = $('.progress-wrap').width();
        var progressTotal = getPercent * getProgressWrapWidth;
        var animationLength = 2500;

        // on page load, animate percentage bar to data percentage length
        // .stop() used to prevent animation queueing
        $('.progress-bar').stop().animate({
            left: progressTotal
        }, animationLength);
    }

Cara Membuat Progress Bar Dengan CSS dan Javascipt

4/ 5

Oleh Chandra Hamdani

Chandra Hamdani Pada 1:55 AM Komentar

Codepoin

Monday, August 31, 2015