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

Question

I am using Indeterminate loading in one of our material lite page. The problem is that it is not taking whole length applied to it.

I am using div with class 'mdl-grid' and inside that I am using another div with class 'mdl-cell mdl-cell--12-col'. in this inner div I am actually using progress bar div.

I am using following HTML code:

<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>

The output of which is like: using-12Col-div

As you can see, it's not taking whole length of the div i.e. 100% So, I tried with two 6 column grids and tried to add progress bar component into those like,

<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>

But still it's taking same width.

The codepen for the same can be found here.

Any help about using inderminate progress bar to take whole length assigned to it, will be much appreciated.

Garbee Garbee · Accepted Answer · 2015-07-30T12:20:42

This is because you are giving the container full width, not the progress itself. Animations need a set width in some sense to work consistently. We opted for a hard width of 3 or 500 pixels against .mdl-progress.

Here is a codepen that is working how you want. Simply understand CSS Animations can get wonky with inherit widths like percentages.

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

1 Answers