add snippet code samples to laoding component page

docs/_pages/components.md

@@ -177,9 +177,23 @@ categories:
       - name: progress
         caption: Progress bar
         class: mdl-progress
+        snippets:
+          - snippet_group:
+            - caption: Default
+              file: progress-default.html
+            - caption: Indeterminate
+              file: progress-indeterminate.html
+            - caption: Buffering
+              file: progress-buffering.html
       - name: spinner
         caption: Spinner
         class: mdl-spinner
+        snippets:
+          - snippet_group:
+            - caption: Default
+              file: spinner-default.html
+            - caption: Single color
+              file: spinner-single-color.html
   - name: menus
     title: Menus
     description: Lists of clickable actions.

src/progress/demo.html

@@ -1,26 +0,0 @@
-  <div class="demo-preview-block">
-
-    <p>
-      Default:
-      <div id="p1" class="mdl-progress mdl-js-progress"></div>
-    </p>
-
-    <p>
-      Indeterminate:
-      <div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
-    </p>
-
-    <p>
-      Buffering:
-      <div id="p3" class="mdl-progress mdl-js-progress"></div>
-    </p>
-  </div>
-  <script>
-    document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
-      this.MaterialProgress.setProgress(44);
-    });
-    document.querySelector('#p3').addEventListener('mdl-componentupgraded', function() {
-      this.MaterialProgress.setProgress(33);
-      this.MaterialProgress.setBuffer(87);
-    });
-  </script>

src/progress/snippets/progress-buffering.html

@@ -0,0 +1,7 @@
+<div id="p3" class="mdl-progress mdl-js-progress"></div>
+<script>
+  document.querySelector('#p3').addEventListener('mdl-componentupgraded', function() {
+    this.MaterialProgress.setProgress(33);
+    this.MaterialProgress.setBuffer(87);
+  });
+</script>

src/progress/snippets/progress-default.html

@@ -0,0 +1,6 @@
+<div id="p1" class="mdl-progress mdl-js-progress"></div>
+<script>
+  document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
+    this.MaterialProgress.setProgress(44);
+  });
+</script>

src/progress/snippets/progress-indeterminate.html

@@ -0,0 +1 @@
+<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>

src/spinner/demo.html

@@ -1,12 +0,0 @@
-  <div class="demo-preview-block">
-
-    <p>
-      Default:
-      <div class="mdl-spinner mdl-js-spinner is-active"></div>
-    </p>
-    <p>
-      Single color (uses primary palette):
-      <div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
-    </p>
-
-  </div>

src/spinner/snippets/spinner-default.html

@@ -0,0 +1 @@
+<div class="mdl-spinner mdl-js-spinner is-active"></div>

src/spinner/snippets/spinner-single-color.html

@@ -0,0 +1 @@
+<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>