[英]How to create a working progressbar for cordova file-transfer
just a simple Question: 只是一个简单的问题:
i used the Script from Raymond Camden Progress Event in Cordova File-Transfer and it works fine. 我使用了Cordova文件传输中 Raymond Camden Progress事件的脚本,它运行正常。 It displays the percentage as a text which counts up till it reaches the 100%. 它将百分比显示为文本,直到达到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? 我如何创建一个进度条,从零开始并计数高达100%并且有一个增长的绿色条?
Im not so good in javascript so i don't know, how to realise this. 我不是很好的JavaScript,所以我不知道,如何实现这一点。
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容器 - >
<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! 谢谢!
One of the simplest way probably is to use the native HTML5 progress bar: <progress></progress>
tags. 最简单的方法之一可能是使用本机HTML5进度条: <progress></progress>
标记。
You put these tags where you want to have the progressbar and set max
and value
properties where: 您可以将这些标记放在要使用进度条的位置,并将max
和value
属性设置为:
max
is the maximum value the progress bar can represent when it's fully loaded (100% in your case) max
是进度条在完全加载时可以表示的最大值(在您的情况下为100%) value
is the actual value of the bar perc
in your case. value
是您的情况下bar perc
的实际值。 So you put something like this in your HTML code: 所以你在HTML代码中添加了这样的东西:
<progress max="100" value="0" id="ft-prog"></progress>
Then you add something like this after statusDom.innerHTML = perc + "% loaded...";
然后你在statusDom.innerHTML = perc + "% loaded...";
之后添加这样的东西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 . 您可以构建/设计更多花哨的进度条,当然在CSS中设置您的progress
标记样式 。
You can get some nice ideas from here using CSS3 : CSS-Tricks progress bars 你可以从CSS3获取一些不错的想法: CSS-Tricks进度条
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 为了记录,我使用angularJS
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.