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)));

    });

FIDDLE 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作为宽度，则需要超过屏幕大小。

动态进度条

2 个答案: