动态进度条

Question

我需要编写一个进度条，该进度条具有一些自定义的最大宽度值以及自定义进度。我发现了一些相关的东西，但它缺少一些功能。

HTML：

<div class="meter">
  <span style="width:502px"></span>
  <p></p>
</div>

CSS：

div.meter {
  position: relative;
  width: 500px;
  height: 25px;
  border: 1px solid #b0b0b0;
  margin-top: 50px;
  /* viewing purposes */
  margin-left: 100px;
  /* viewing purposes */
  -webkit-box-shadow: inset 0 3px 5px 0 #d3d0d0;
  -moz-box-shadow: inset 0 3px 5px 0 #d3d0d0;
  box-shadow: inset 0 3px 5px 0 #d3d0d0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
div.meter span {
  display: block;
  height: 27px;
  animation: grower 1s linear;
  -moz-animation: grower 1s linear;
  -webkit-animation: grower 1s linear;
  -o-animation: grower 1s linear;
  position: relative;
  top: -1px;
  left: -1px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.2);

   background-color:#e8e8e8;
 filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#e8e8e8, endColorstr=#ff8d00);
 background-image:-moz-linear-gradient(left, #e8e8e8 0%, #ff8d00 46%,#eb0221 100%);
background-image:linear-gradient(left, #e8e8e8 0%, #ff8d00 46%,#eb0221 100%);
background-image:-webkit-linear-gradient(left, #e8e8e8 0%, #ff8d00 46%,#eb0221 100%);
background-image:-o-linear-gradient(left, #e8e8e8 0%, #ff8d00 46%,#eb0221 100%);
background-image:-ms-linear-gradient(left, #e8e8e8 0%, #ff8d00 46%,#eb0221 100%);
 background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#e8e8e8), color-stop(46%,#ff8d00),color-stop(100%,#eb0221));}

  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
}
div.meter span:before {
  content: '';
  display: block;
  width: 100%;
  height: 50%;
  position: relative;
  top: 50%;
  background: rgba(0, 0, 0, 0.03);
}
div.meter p {
  position: absolute;
  top: 0;
  margin: 0 10px;
  line-height: 25px;
  font-family: 'Helvetica';
  font-weight: bold;
  -webkit-font-smoothing: antialised;
  font-size: 15px;
  color: #333;
  text-shadow: 0 1px rgba(255, 255, 255, 0.6);
}

@keyframes grower {
  0% {
    width: 0%;
  }
}

@-moz-keyframes grower {
  0% {
    width: 0%;
  }
}

@-webkit-keyframes grower {
  0% {
    width: 0%;
  }
}

@-o-keyframes grower {
  0% {
    width: 0%;
  }
}

脚本：

    $(function(){
        var bar = $('span');
var p = $('p');


var width = "bar.attr('style')";
width = width.replace("width:", "");
width = width.substr(0, width.length-1);


var interval;
var start = 0; 
var end = parseInt(width);
var current = start;

var countUp = function() {
  current++;
  p.html(current + "%");

  if (current === end) {
    clearInterval(interval);
  }
};

interval = setInterval(countUp, (1000 / (end + 1)));

    });

小提琴HERE

进度条的最大宽度应该是可定制的，例如10000 你的进度是 5000。最大值应该是脚本中插入的任何数字。如果它还显示条形的等分 4。如下图所示。

Answer 1

根据您的代码，我尝试生成动态进度条。你可以在这里看到结果JSFIDDLE

我做的是以下事情：

• 我在进度条周围创建了一个包装器，其中包含进度条的特定宽度
• 我将进度条宽度设置为 100%，如果我们有一个从 0 到 100 的刻度，则更容易设置进度的宽度
• 我添加了 jQuery 动画效果，而不是在 CSS 中使用关键帧
• 我设置的文本和文本在进度条下方的位置取决于进度条本身的大小。

你唯一要改变的是：

var end = 75; // Were this value is the position were the bar ends

和：

.wrapper{width:800px;}

如果您有任何问题，请告诉我。

HTML

<div class="wrapper">
    <div class="meter">
      <span></span>
      <p></p>
    </div>
    <div class="ticks">        
        <span class="first"></span>
        <span class="second"></span>
        <span class="third"></span>       
    </div>
</div>

JS

$(function(){
    var bar = $('span');
    var p = $('p');

    var width = $(".wrapper").width(); // the width of the wrapper can be set via CSS


    var interval;
    var start = 0; 
    var end = 75; //Percentage were the bar must end (value from 0 to 100)
    var current = start;

    var calculate_percentage = (width / 100) * end

    var countUp = function() {
      current++;
       $('div.meter span').animate({width:end+"%"},11000); // Animation of the progress bar
       p.html(current + "px");

      if (current === calculate_percentage) {
        clearInterval(interval);
      }
    };

    interval = setInterval(countUp, (500 / (end + 1)));
    var first = width / 4;
    var second = first * 2;
    var third = first * 3;
    $(".first").append(first + "px");
    $(".first").css("left", first+"px");
    $(".second").append(second + "px");
    $(".second").css("left", second+"px");
    $(".third").append(third + "px");
    $(".third").css("left", third+"px");    

});

Answer 2

看起来它已经开始工作了。您所要做的就是取条的宽度，比如说，我们使用 10,000（作为条的宽度）：

从 0 开始，然后显示 2500 (10,000/4)，然后是 7500，最后是 10,000。

至于进度条本身，只需在更新时显示数字即可。

--

另外，你可能应该使用 % 作为进度条，因为如果你使用 10,000 作为宽度，它会比屏幕尺寸更大。