如何为cordova文件传输创建工作进度条

Question

只是一个简单的问题：

我使用了Cordova文件传输中 Raymond Camden Progress事件的脚本，它运行正常。 它将百分比显示为文本，直到达到100％为止。

这很好用，但看起来不太好。 我如何创建一个进度条，从零开始并计数高达100％并且有一个增长的绿色条？

我不是很好的JavaScript，所以我不知道，如何实现这一点。

这是我的代码：

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 += ".";
            }
        }
    };

在我的索引中我有一个div容器 - >

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

希望有人能告诉我，如何创建进度条。 如果你给我一个详细的解释，那就太棒了。 谢谢！

Answer 1

最简单的方法之一可能是使用本机HTML5进度条： <progress></progress>标记。

您可以将这些标记放在要使用进度条的位置，并将max和value属性设置为：

• max是进度条在完全加载时可以表示的最大值（在您的情况下为100％）
• value是您的情况下bar perc的实际值。

所以你在HTML代码中添加了这样的东西：

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

然后你在statusDom.innerHTML = perc + "% loaded...";之后添加这样的东西statusDom.innerHTML = perc + "% loaded..."; ：

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

您可以构建/设计更多花哨的进度条，当然在CSS中设置您的progress标记样式 。
你可以从CSS3获取一些不错的想法： CSS-Tricks进度条

Answer 2

这是一个带有进度条的完整示例。 我在我的应用程序中使用它

<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>

为了记录，我使用angularJS