进度条与百分比jquery移动

Question

我正在尝试使用jquery mobile开发移动应用程序，因为我正在使用Web服务。我希望它显示一个完成百分比的进度条。

Answer 1

完全披露：我已经编写了这个开源插件

您可以尝试jQuery-Mobile-Progress-Bar-with-Percentage插件。

jQuery-Mobile-Progress-Bar-with-Percentage（Tolito Progress Bar）是jQuery Mobile的一个插件，可以创建，管理，启动，停止，恢复和显式设置进度条的值。此外，构造函数提供了在jQuery Mobile标准主题的基础上设置进度条的外部主题和内部填充主题的选项，以显示百分比完成计数器，设置进度条是否具有正常或迷你尺寸，以定义间隔，指定填充频率，配置外部条的最大值，并设置填充内部条的初始值。已使用JavaScript原型链接方法，以便能够链接单独的方法调用，其中每个调用都在同一实例上进行。

<强>编辑： 新版 1.0.3 包含停止和/或恢复进度条以及明确设置进度条的值的功能。这适用于需要执行某些AJAX请求的情况，并且在每个成功响应中，必须明确设置进度条值以表示实际进度状态。此外，当进度条完成时会触发事件。

已经使用了JavaScript原型链接方法，以便能够链接单独的方法调用，其中每个调用都在同一个实例上进行。

以下代码配置，构建和初始化进度条：

TolitoProgressBar('progressbar')
    .setOuterTheme('b')
    .setInnerTheme('e')
    .isMini(true)
    .setMax(100)
    .setStartFrom(0)
    .setInterval(10)
    .showCounter(true)
    .logOptions()
    .build()
    .run();

迷你进度条示例：

对话框中的正常进度条示例：

包含正常进度条的叠加层示例：

Answer 2

试试这个：

<强> CSS

.progress { position:relative; width:260px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; max-width:240px; border-radius: 3px; background-image: url(../images/pbar-ani.gif); }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }

<强> JS

将持续时间参数更改为您的估计时间。

$(".bar").animate({width:'100%'},{duration:5000,step:function(now,fx){
    var pc = parseInt(now)+'%';
    $(".percent").html(pc);}
});