Question

我有这段代码......

HTML

<div class="progress-bar">
    <span class="progress-bar-fill" style="width: 30%"></span>
</div>

CSS

.progress-bar {
    width: calc(100% - 6px);
    height: 5px;
    background: #e0e0e0;
    padding: 3px;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}

.progress-bar-fill {
    display: block;
    height: 5px;
    background: #659cef;
    border-radius: 3px;
    transition: width 250ms ease-in-out;
}

它应该显示滑块的进度以及当前图像将持续多长时间直到下一个上传....

如果图像每5秒更改一次，那么我希望条形图在5秒内完成100％...我在javascript和jQuery中总是noob ......

Answer 1

你可以使用它。

更新： - 让transition 5秒。

transition: width 5s ease-in-out;

$('.progress-bar-fill').delay(1000).queue(function () {
        $(this).css('width', '100%')
    });

.progress-bar {
    width: calc(100% - 6px);
    height: 5px;
    background: #e0e0e0;
    padding: 3px;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}

.progress-bar-fill {
    display: block;
    height: 5px;
    background: #659cef;
    border-radius: 3px;
    /*transition: width 250ms ease-in-out;*/
    transition: width 5s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar">
    <span class="progress-bar-fill" style="width: 30%"></span>
</div>

我希望它会对你有所帮助。

Answer 2

您可以让jQuery一次性设置转换声明。

填写5s：

$(".progress-bar-fill").css({"width":"100%","transition":"5s"});

立即清空：

$(".progress-bar-fill").css({"width":"0%","transition":"none"});

Answer 3

或者你可以这样做：

HTML

<div id="container"></div>

CSS

 #container {
 margin: 20px;
 width: 400px;
 height: 8px;
 position: relative;
 }

Babel + JSX

var bar = new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
text: {
style: {
  // Text color.
  // Default: same as stroke color (options.color)
  color: '#999',
  position: 'absolute',
  right: '0',
  top: '30px',
  padding: 0,
  margin: 0,
  transform: null
},
autoStyleContainer: false
},
from: {color: '#FFEA82'},
to: {color: '#ED6A5A'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 100) + ' %');
}
});

bar.animate(1.0);  // Number from 0.0 to 1.0

它可以全部在https://jsfiddle.net上进行调整干杯！

在x秒内填充进度条

3 个答案: