progress-bar - Material design lite 不确定的进度条没有采用整个宽度

Question

我在我们的 Material lite 页面之一中使用了不确定加载。
问题在于它并没有将整个长度应用于它。

我正在使用带有“mdl-grid”类的 div，在里面我使用另一个带有“mdl-cell mdl-cell--12-col”类的 div。在这个内部 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 .

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

Answer 1

这是因为您正在为容器提供全宽，而不是进度本身。动画在某种意义上需要设置宽度才能一致地工作。我们选择了 3 或 500 像素的硬宽度，而不是 .mdl-progress .

Here is a codepen这就是你想要的方式。简单地理解 CSS 动画可以通过继承宽度(如百分比)变得不稳定。