How to create a progress dashboard to transfer cordova file

Question

just a question:

I used the Script from the Raymond Camden Event Progress in File-Transfer in Cordoba and it works great. It displays the percentage in the form of text, which is calculated up to 100%.

This works well, but it does not look very good. How can I create a progress indicator that starts from zero and counts up to 100% and has a green bar that is growing?

Im not so good at javascript, so I don't know how to implement this.

Now this is my code:

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 container div →

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

hope someone tells me how to create an indicator of progress. It would be great if you would give me a detailed explanation. Thanks!

Answer 1

One of the easiest ways is probably to use your own HTML5 <progress></progress> bar: <progress></progress> tags.

You put these tags where you want to have a progress bar, and set the max and value properties, where:

• max - the maximum value that the progress bar can represent when it is fully loaded (100% in your case)
• value is the actual value of the perc string 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 create / design more fantastic progress indicators, thereby putting your progress tag in CSS .
You can get useful ideas from here using CSS3 : CSS-Tricks Execution Templates

Answer 2

Here is a complete progress bar example. I use it in my application

 <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 recording I use angularJS