[HTML][CSS][Material Design Lite]LOADING 1

LOADINGを確認しながら、ローディングコンポーネントの実装方法を調査しました。

<div class="mdl-progress mdl-js-progress"></div>
<script>
document.querySelector('.mdl-progress').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(44);
});
</script>

上の例は、プログレスが動かないstaticなバー。

逆に下のようにmdl-progress__indeterminateを追加すると動的にプログレスバーの進捗状況が変わる。

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