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!
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!
Share Improve this question asked Aug 28, 2014 at 14:57 SithysSithys 3,8038 gold badges36 silver badges68 bronze badges 2- could u help me with this stackoverflow./questions/42784079/… similar question but i could not understand what is happening, and how this will get executed – Yokesh Varadhan Commented Mar 14, 2017 at 12:18
- That URL in the OP is now: raymondcamden./2013/05/01/… – vr_driver Commented Jun 14, 2018 at 13:56
2 Answers
Reset to default 11One 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 barperc
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
Here is a plete 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