Material design lite 不确定的进度条没有占用整个宽度

Question

我在我们的一个 material 精简版页面中使用不确定加载。问题是它没有应用整个长度。

我正在使用 div 和 class 'mdl-grid'，在里面我正在使用另一个 div 和 class 'mdl-cell mdl-cell--12-col'。在这个内部 div 我实际上使用的是进度条 div.

我正在使用以下 HTML 代码：

<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>
</div>

输出如下： using-12Col-div

如您所见，它并没有占用 div 的整个长度，即 100% 因此，我尝试使用两个 6 列网格并尝试将进度条组件添加到

<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>

但它仍然采用相同的宽度。

可以找到相同的代码笔 here。

任何有关使用不确定进度条获取分配给它的整个长度的帮助，将不胜感激。

Answer 1

这是因为您给的是容器全宽，而不是进度本身。从某种意义上说，动画需要设置宽度才能始终如一地工作。我们针对 .mdl-progress.

选择了 3 或 500 像素的硬宽度

Here is a codepen 这就是你想要的方式。简单理解 CSS 动画会因为百分比等继承宽度而变得不稳定。

Material design lite 不确定的进度条没有占用整个宽度

Material design lite Indeterminate progress bar is not taking whole width applied to it

progress-bar

material-design-lite