Defaut Progress Bar

<!-- Simple MDL Progress Bar -->
    <div class="mdl-progress mdl-js-progress" id="p1"></div>
    <script>
        document.querySelector('#p1').addEventListener('mdl-componentupgraded', function(){
            this.MaterialProgress.setProgress(44);
        })
    </script>
`</pre>

### Intedeterminate Progress Bar

<!-- MDL Progress Bar with Indeterminate Progress -->

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

<pre>`&lt;!-- MDL Progress Bar with Indeterminate Progress --&gt;
&lt;div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"&gt;&lt;/div&gt;
`</pre>

### Buffering Progress Bar

<pre>`    &lt;!-- MDL Progress Bar with Buffering --&gt;
    &lt;div class="mdl-progress mdl-js-progress" id="p1"&gt;&lt;/div&gt;
    &lt;script&gt;
        document.querySelector('#p1').addEventListener('mdl-componentupgraded', function(){
            this.MaterialProgress.setProgress(33);
            this.MaterialProgress.setBuffer(66);
        })
    &lt;/script&gt;
`</pre>

### Default Spinner

<div class="mdl-spinner mdl-js-spinner is-active"></div>

<pre>`&lt;div class="mdl-spinner mdl-js-spinner is-active"&gt;&lt;/div&gt;
`</pre>

### Single Color Spinner

<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>

<pre>`&lt;div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"&gt;&lt;/div&gt;