Pagi semuanya kita lanjut lagi belajarnya, untuk kali ini saya akan memberikan sebuah tutorial sering kita gunakan dan sering kita liat juga yaitu sebuah progress bar dimana fungsi progress bar sendiri bisa di gunakan untuk sebuah efek ketika kita mengupload sebuah file, bahkan saat mendownload, oke jadi seperti apa cara membuat fungsi progress bar, simak terus ya teman-teman. Bagi teman-teman yang pernah menggunakan
sebuah bootstrap pasti pernah ya melihat sebuah tampilan progress bar tetapi bagaimana cara menggunakannya supaya menjadi dinamis, sesuai uploadan yang kita mau, tetapi untuk cara membuat fungsi progress bar saya menggunakan jquery saja jadi belum benar-benar kita mengupload sebuah file, karena jika masih offline proses upload mash sangat cepat, beda jika kita sudah online ya, oke langsung saja seperti yang tadi saya tulis di atas, saya menggunakan bootstrap karena sudah di
sediakan.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <style> .progress-bar{ width:0%; } </style>
</head> <body> <div class="container mt-5"> <div class="row"> <div class="col-md-8 offset-md-2"> <h2
class="text-center pb-2">Cara Membuat fungsi progress bar</h2> <div class="progress"> <div class="progress-bar progress-bar-striped bg-danger"
role="progressbar"aria-valuenow="0"aria-valuemin="0"aria-valuemax="100">0</div> </div> <button class="btn
btn-primary btn-sm mt-3">start</button> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script>
$(document).ready(function(){ $(".btn").click(function(){
$(".progress-bar").addClass("bg-danger"); varsize=0; varinterval= setInterval(function(){
size=size+10; $(".progress-bar").css('width',size+'%');
$(".progress-bar").text(size+"%"); if(size>=50&& size < 100){ $(".progress-bar").removeClass("bg-danger");
$(".progress-bar").addClass("bg-warning"); }elseif(size>=100){ clearInterval(interval);
$(".progress-bar").removeClass("bg-warning"); $(".progress-bar").addClass("bg-success");
$(".progress-bar").text("done"); } },1000); }) }) </script> </body>
</html> silahkan teman-teman copy file di atas, cukup simple ya, jadi di dalam progressnya kita buat valunya min dan maxnya, jadi itulah yang kita atur, dan hasilnya akan seperti ini  Gambar di atas adalah proses ketika saya baru tekan start dan jika sudah 50% maka akan saya rubah warnanya hinga 100% oke seperti inilah cara membuat fungsi progress bar semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih. |
Cara menggunakan html progress bar
Pos Terkait
Copyright © 2024 idkuu.com Inc.
