Membuat Progressbar Dengan Jquery

cara mudah membuat progress bar dengan jqeury

Selamat Datang sahabat mudah , kali ini kita akan membahas Cara Membuat Progressbar Dengan Jquery .
Pasti sahabat sudah tahu tentang progressbar, tertanya mudah loh caranya membuat dengan menggunakan jquery.
Progressbar di gunakan untuk melihat bagaimana proses yang kita jalankan untuk membuka suatu dokumen , upload photo.

Langsung Saja Kita ke kodingnya
Silahkan copy kode di bawah ini

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
 <link rel="stylesheet" href="http://www.tutorialspoint.com/jquery/src/progressbar/jQuery-plugin-progressbar.css">
 <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
 <script src="http://www.tutorialspoint.com/jquery/src/progressbar/jQuery-plugin-progressbar.js"></script>
</head>
<body>

 <div class="progress-bar position"></div>
 <div class="progress-bar position" data-percent="40" data-duration="1000" data-color="#ccc,yellow"></div>
 <div class="progress-bar position" data-percent="90" data-color="#a456b1,#12b321"></div>
 <input type="submit" value="reload">
 <script>
  $(".progress-bar").loading();
  $('input').on('click', function () {
    $(".progress-bar").loading();
  });
 </script>

</body>
</html>

Script dan CSS diatas anda dapat download , karena masih online .

Baca juga artikel tentang membuat-option-tanpa-klik-submit-dengan Jquery

Sekilas penjelasan script :

Pada bagian data-percent kita dapat ganti , berapa persen data yang di ingin kan ,
Pada data-duration merupakan durasi dalam menjalankan progress tersebut .

Maka hasilnya akan terlihat seperti di bawah ini ,

s Cara Membuat Progressbar Dengan Jquery . Pasti sahabat sudah tahu tentang progressbar, tertanya mudah loh caranya membuat dengan menggunakan jquery. Progressbar di gunakan untuk melihat bagaimana proses yang kita jalankan untuk membuka suatu dokumen , upload photo. #jquery , #Tutorial,#javascript,#mudah#progressbar

Tutorial Membuat progressbar

Setelah di klik reload hasilnya akan seperti ini :

Tutorial Membuat progressbar

Baca juga artikel tentang Cara-mengambil-attribut-data-dengan jquery

Sekian tutorial Cara Membuat Progressbar Dengan Jquery , semoga dapat membantu .
Bagian tutorial ini agar bertambah ilmu kita :)
Wassalamu'alaikum Wr.Wb

SEO mudah

Bantu up

Membuat Progressbar Dengan Jquery

Author : Wafik ulinnuha

Share this

5 komentar

iklan

SEO mudah

Bantu up

Membuat Progressbar Dengan Jquery

Author : Wafik ulinnuha

Share this

Related Posts

5 komentar

iklan