4

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

我正在使用带有“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>

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

可以在此处找到相同的代码笔。

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

4

1 回答 1

4

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

这是一个按您希望的方式工作的代码笔。简单理解 CSS 动画可能会因继承宽度（如百分比）而变得不稳定。

于 2015-07-30T12:20:42.117 回答