css 在x秒内填满进度列

0qx6xfy6 于 2022-11-19 发布在其他

关注(0)|答案(4)|浏览(143)

我有个密码...
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;
}

它应该显示滑块的进度，以及当前图像将持续多长时间，直到下一个apperas...
如果图像每5秒改变一次，那么我希望在5秒内填充100%的栏......我在javascript和jQuery方面完全是菜鸟......

css

来源：https://stackoverflow.com/questions/33096675/fill-progress-bar-in-x-seconds

4条答案

按热度按时间

rta7y2nd1#

你可以使用它。

- 更新： - * * make transition 5 秒。

transition: width 5s ease-in-out;
第一个
希望对你有帮助。

赞(0）回复(0）举报 2022-11-19

rdlzhqv92#

您可以让jQuery一次性设置转换声明。
要填写5s：
$(".progress-bar-fill").css({"width":"100%","transition":"5s"});
立即清空：
$(".progress-bar-fill").css({"width":"0%","transition":"none"});

赞(0）回复(0）举报 2022-11-19

envsm3lx3#

第一个

赞(0）回复(0）举报 2022-11-19

5lhxktic4#

或者您可以这样做：
HTML语言

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

CSS

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

巴别塔+ 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上调谐干杯！

赞(0）回复(0）举报 2022-11-19

我来回答

css 在x秒内填满进度列

4条答案

相关问题

热门标签

最新问答