动态进度条

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%; 
    } 
} 

SCRIPT：

$(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 FIDDLE

进度条的最大宽度应customiz能够例如10000 ，并且您的进度是5000.最大值应该是脚本中插入的任何数字。如果它也显示等分的酒吧4。像下面的图片。

Answer 1

看起来它已经在工作。所有你需要做的就是取出条的宽度，并说，我们使用10,000（作为条宽）：

从0开始，然后显示2500（10,000/4），然后7500，最后10,000 。

至于进度条本身，只是在更新它时显示数字。

-

此外，你应该使用％进度条，因为如果使用万的宽度，它会采取比屏幕尺寸更大。

Answer 2

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

我所做的是以后的事：

• 我创造了周围包含
• 我设置进度条宽条的具体宽度进度条的包装到100％，如果我们有从0到100的比例，则更容易设置进度的宽度
• 我在您的CSS中添加了jQuery动画效果，而不是使用关键帧
• 我设置了文本和位置文本在进度条de下面放在进度条本身的大小上。

你想改变的唯一事情是：

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

});