Question

我正在使用jQuery实现自己的Progress Bar。我的问题是如何填充（例如）只有30％的背景？我有什么选择？基本上，进度条是一个带圆角的简单div（-moz-border-radius）。我正在使用Firefox 3.6.3。

[更新] 我试过this例子。如何在第三个例子中强制填充区域的右侧不圆？第四个例子虽然有问题......你怎么解决这个问题？

谢谢！

Answer 1

一个简单的选项是使用背景颜色，确保外部容器宽度是固定的，然后只需将内部div的宽度设置为与进度相同的百分比。

Answer 2

你可以使用一个div和一个图像，正如我之前在评论中提到的那样。这是你可以做到的一种方式。（未完全测试，因此可能会破坏。）

HTML：

<div id="progressBar"></div>

CSS：

 #progressBar {
   width: 200px;
   height: 20px;
   background: url('http://o.imm.io/x9E.jpg') no-repeat;
   background-position: -200px 0px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
}

JS：

function setProgress(target,value) {

  var oldPosition = $(target).css("backgroundPosition");

  // Log the old position 
  console.log("Old position: " + oldPosition);
  var newPosition = parseInt(oldPosition) + parseInt(value);

  // Log the new position
  console.log("New position: " + newPosition);
  $(target).animate({backgroundPosition: newPosition + 'px 0px'})
}

修改：我添加了圆角，它的工作方式与您指定完全一致，圆角没有问题。

修改2 ：查看此代码的JSBin版本。

编辑3 ：正如OP所说，他们需要进度条灵活调整大小。这种实现不会那样做。我将推荐（如我之前所述）使用jQueryUI Progress Bar。它易于使用，而且相当轻巧。

编辑4 ：我想出了另外一个实现，需要更多的Javascript，但你可以在这里测试一下：http://jsfiddle.net/ntnz4/7/

Answer 3

不知道您使用什么来为进度条设置动画，但是如果您可以在接近结束时更改半径，则可以平滑过渡。

$('#inner4')
    .css('width',25)
    .css('-moz-border-radius-topright','0')
    .css('-moz-border-radius-bottomright','0')
    .animate(
      {
        width:425
      },
      3000, 'linear',
      function() {
          $('#inner4').animate({
            width:450,
            '-moz-border-radius-bottomright':'+=25',
            '-moz-border-radius-topright':'+=25'
          },
          200,'linear',
          function() {}
        );//end inner animate
      }
    );//end animate

Here's an example

Answer 4

你可以使用2个div，一个在另一个里面，将背景放在内层，并用％设置它的宽度，如下所示：

<div style="">
    <div style="background: red; width: 50%">&nbsp;</div>
</div>

Answer 5

我已经为我的一些网站做了你正在做的事情，这就是我所做的：

我首先做了一些基本的标记：

<div id="progressBar">
    <div id="progressBarInner"></div>
</div>

CSS：

#progressBar {
    width: 200px;
    height: 20px;
}

#progressBarInner {
    background: url('path/to/your/progress/image.jpg');
    width: 100%;
    height: 100%;
}

完成后，设置进度实际上非常简单。无论您希望在进度条中显示什么进度，都可以设置为#ProgressBarInner元素的宽度。例如，如果您想显示32％，则需要设置：

width: 32%

表示progressBarInner div。

我不知道如何使用jQuery做到这一点，但我确实知道你可以使用它设置CSS属性，所以这是完全可能的。

Answer 6

HTML：

<div class="progress"><div style="width:30%"></div></div>

CSS：

    .progress {
    width: 300px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.progress div {
    background: url(background.png);
    height: 10px;
    -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px;
    -webkit-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px;
}

Answer 7

我对你想要做的关于填充颜色圆角的想法有点困惑！但如果它应该是直线前进而不是四舍五入，只需用css overflow设置包装器div：hidden;

这样，内部div将一直前进到100％，当通过圆形区域时会产生很酷的效果！

进度条填充 - jQuery实现

7 个答案: