Question

我有这个jQuery代码

function SetFilesNeeded( needed ) {
$("#neededFiles").text(needed);
}
function SetFilesTotal( total ) {
$("#totalFiles").text(total);
}

SetFilesNedded函数是需要多少文件，每次值needed更改时都会调用它。 SetFilesTotal是文件总数。

我想制作一个宽度为580px的加载栏。我的CSS加载栏：

#loadBar2 {
    border-radius: 5px;
    background: #99FF99;
    padding: 5px;
    width: 580px;
    height: 10px;
    top: -823px;
    left: 50%;
    margin-left: -290px;
    margin-top: -100px;
    position: relative;

    opacity: 0.5;
    filter:alpha(opacity = 50);
}

我如何使用jQuery代码将起始宽度设置为1px，并且当添加更多文件时，条形宽度会增加，直到达到最大值（580px）？

Answer 1

您不需要任何插件来创建简单的加载栏。

Demo: http://jsfiddle.net/bx0273ro/

它基本上是两个div，一个是用作背景的父级，然后是用作进度部分的颜色部分的子级。

条的宽度实际上就是这样：

<强> MaxWidth * ((total-needed)/total)

这是一些动画的代码

var needed, total, 
    tEle = $('#totalFiles'), 
    nEle = $('#neededFiles'),
    bar = $('#loadingBar'),
    width = bar.width();

needed = total = tEle.text();

var t = setInterval(function(){
    if (--needed == 0) clearInterval(t);
    update();
},500);

function update() {
    nEle.text(needed);
    bar.find('.bar').width(width * ((total-needed)/total));
}

Answer 2

如果您需要该功能，我会建议使用这个jQuery加载栏插件。 https://github.com/rstacruz/nprogress

这是非常好的快速解决方案。代码是github上的开源代码，因此您可以看到它是如何实现的。另外在git上你可以找到如何设置插件的快速说明。

如果你卡在某个地方随意问。

CSS / HTML加载栏

2 个答案: