进度条填充 - jQuery实现

Question

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

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

谢谢 !

Answer 1

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

Answer 2

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

$('#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

这是一个例子