Progress Bar download data API

progress bar download

Maunya data yang kita download itu terlihat progressnya supaya kita bisa estimasi waktu selesai dan seberapa besar sih datanya.

Kalau sebentar dan ukuran data kecil, maka kita bisa tunggu; dan kalau lama dan ukuran data gede, maka kita mungkin bisa sambil nyambi kerjain yang lain;

Tujuannya untuk efektifitas waktu dan produktifitas kerja ya.

Bisa juga mungkin request dari bapak kepala dinas atau client 😀 apapun itu alasannya, konten di article ini semoga bisa membantu.

Tampilan progress bar:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
      <meta charset="UTF-8">
      <title>Progress Bar</title>
      <link rel="stylesheet" href="{{ URL::asset('bootstrap-darkly.min.css') }}">
    </head>
    <body>
        <div class="container" style="margin-top: 200px;">
            <div class="row">
                <div class="col-md-12">
                    <p>
                        <button id="download-button" class="btn btn-success mt-10">Download</button>
                    </p>
        
                    <p>
                        <div class="progress">
                          <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" id="progress" aria-valuemin="0" aria-valuemax="100">
                            
                          </div>
                        </div>
                    </p>
        
                    <p>
                        <button onclick="abort();" type="button" class="btn btn-warning">Abort</button>
                    </p>
        
                    <p><span id="download-progress-text"></span></p>
                </div>
            </div>
        </div>
    </body>

    <style type="text/css">
        .container {
            position: relative;
            top: 40%;
        }
        .progress {
            height: 40px;
        }
        #progress {
            font-size: 16px;
        }
        p {
            text-align: center;
        }
    </style>

</html>

Fungsi progress bar:

<script type="text/javascript">
        var progress = document.getElementById("progress");
        var progressText = document.getElementById("progress-text");
        var downloadProgressText = document.getElementById("download-progress-text");
        var content_length = null;
        filename="data";
        
        
        document.querySelector('#download-button').addEventListener('click', function() {
                                                                    
            var startTime = new Date().getTime();                       
            var xhr = new XMLHttpRequest();
            const url = 'https://api.themoviedb.org/3/movie/popular?api_key=0fc5740199faa752da813c8c97f659e8&language=en-US';
            xhr.open('GET', url, true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.send();

            // console.log(xhr);
            
            xhr.onreadystatechange = function() {
                if(this.readyState == 4 && this.status == 200) {
                    data = JSON.parse(xhr.responseText);
                    // console.log(data);
                    var total = data.results.length;
                    for (var loaded = 0; loaded < total; loaded++){
                        var obj = data.results[loaded];
                        console.log(obj);
                    }
                    var percent_complete = (loaded / total)*100;
                    percent_complete = Math.floor(percent_complete);
                    var duration = ( new Date().getTime() - startTime ) / 1000;
                    var bps = loaded / duration;
                    var kbps = bps / 1024;
                    kbps = Math.floor(kbps);
                    
                    var time = (total - loaded) / bps;
                    var seconds = time % 60;
                    var minutes = time / 60;
                    
                    seconds = Math.floor(seconds);
                    minutes = Math.floor(minutes);
            
                    progress.setAttribute("aria-valuemax", total);
                    progress.setAttribute("aria-valuenow", loaded);
                    progress.style.width = percent_complete + "%";
                    progress.innerHTML = percent_complete + "%";
            
                    downloadProgressText.innerHTML = kbps + " KB / s" + "<br>" + minutes + " min " + seconds + " sec remaining";
                }
            };

            function abort() {
                xhr.abort();
            }
        });
        </script>

Untuk code fungsi progress bar diletakan sebelum close </html> ya, atau untuk lebih jelas dan lengkap bisa lihat demo berikut ini.

Penjelasan dengan video:

progress bar

Download full source code: progressbardownloadapi

Leave a Reply

Your email address will not be published. Required fields are marked *