Why Can't I get progressbar.js working in Jquery?

Question

I am currently making an application in Javascript and Jquery with node.js and electron that will download it's db files on first run. I want to implement the progressbar.js so that it shows a download bar when the files are downloading. I am following the setup guide for progressbar.js and implemented a javascript download with progress from ourcodeworld.com however, when running my electron app, the download bar does not render at all. How would I get this to work in electron so that the progress bar renders and shows the download progress?

HTML CODE

<body>

    <div id="container"></div>

</body>

Javascript/Jquery

            var bar = new ProgressBar.Line(container, {
                strokeWidth: 4,
                easing: 'easeInOut',
                duration: 1400,
                color: '#FFEA82',
                trailColor: '#eee',
                trailWidth: 1,
                svgStyle: { width: '100%', height: '100%' }
            });
            function progress() {
                bar.animate(1.0);  // Number from 0.0 to 1.0
            }

            function downloadFile(file_url, targetPath) {
                // Save variable to know progress
                var received_bytes = 0;
                var total_bytes = 0;

                var req = request({
                    method: 'GET',
                    uri: file_url
                });

                var out = fs.createWriteStream(targetPath);
                req.pipe(out);

                req.on('response', function (data) {
                    // Change the total bytes value to get progress later.
                    total_bytes = parseInt(data.headers['content-length']);
                });

            req.on('data', function (chunk) {
                // Update the received bytes
                received_bytes += chunk.length;

                progress();
            });

            req.on('end', function () {
                alert("File succesfully downloaded");
            });
        }
downloadFile("http://www.planwallpaper.com/static/images/butterfly-wallpaper.jpeg", "./varbutterfly-wallpaper.jpeg");

fiddle

Answer 1

You always give the value to the progress with 1.0

function progress() {
    bar.animate(1.0);  // Number from 0.0 to 1.0
}

So please change it to

function progress(val) {
    bar.animate(val);  // Number from 0.0 to 1.0
}

and then change the update from

req.on('data', function (chunk) {
    // Update the received bytes
    received_bytes += chunk.length;
    progress();
});

to this

req.on('data', function (chunk) {
    // Update the received bytes
    received_bytes += chunk.length;
    progress(received_bytes/total_bytes);
});

as you can see you will find out that the progress change for every chunk update and divide it by the total_bytes if it is all downloaded then it will be 1.0 else will be the animation you need.

or you can change the progress function to

function progress(val) {
    bar.set(val); // Number from 0.0 to 1.0
}

for setting the value exactly without animation.

Why Can't I get progressbar.js working in Jquery?

Question

1 answers

solution1
2 ACCPTED 2017-10-16 06:24:29

Why Can't I get progressbar.js working in Jquery?

Question

1 answers

solution1 2 ACCPTED 2017-10-16 06:24:29

solution1
2 ACCPTED 2017-10-16 06:24:29