How to create a working progressbar for cordova file-transfer

Question

just a simple Question:

i used the Script from Raymond Camden Progress Event in Cordova File-Transfer and it works fine. It displays the percentage as a text which counts up till it reaches the 100%.

This works good, but it doesn't look fine. How can i create a progressbar, that starts by zero and counts up to 100% and has a green bar that grows?

Im not so good in javascript so i don't know, how to realise this.

This is my Code now:

var statusDom;

statusDom = document.querySelector('#status');

ft.onprogress = function(progressEvent) {
            if (progressEvent.lengthComputable) {
        var perc = Math.floor(progressEvent.loaded / progressEvent.total * 100);
    statusDom.innerHTML = perc + "% loaded...";
            console.log(perc);
            } else {
                    if(statusDom.innerHTML == "") {
                    statusDom.innerHTML = "Loading";
            } else {
                    statusDom.innerHTML += ".";
            }
        }
    };

and in my index i got a div container ->

<div id="status"></div>

hope someone can tell me, how to create a progressbar. It would be great if you give me a detailed explanation. Thank you!

Answer 1

One of the simplest way probably is to use the native HTML5 progress bar: <progress></progress> tags.

You put these tags where you want to have the progressbar and set max and value properties where:

• max is the maximum value the progress bar can represent when it's fully loaded (100% in your case)
• value is the actual value of the bar perc in your case.

So you put something like this in your HTML code:

<progress max="100" value="0" id="ft-prog"></progress>

Then you add something like this after statusDom.innerHTML = perc + "% loaded...";:

document.getElementById("ft-prog").value = perc;

You can build / design more fancy progress bars of course styling your progress tag in CSS.
You can get some nice ideas from here using CSS3: CSS-Tricks progress bars

Answer 2

Here is a complete example with a progress bar. I am using it in my app

<div class="progress sell_progress_bar">
    <div class="progress-bar" role="progressbar" aria-valuenow="{{ upload_percentage }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ upload_percentage }}%">
        <span class="sr-only">100% Complete</span>
    </div>
</div>

For the record I am using angularJS