diff --git a/node_modules/material-design-lite/src/progress/snippets/progress-buffering-demo.html b/node_modules/material-design-lite/src/progress/snippets/progress-buffering-demo.html
new file mode 100644
index 0000000..1fa26ac
--- /dev/null
+++ b/node_modules/material-design-lite/src/progress/snippets/progress-buffering-demo.html
@@ -0,0 +1,8 @@
+<style>
+  .demo-progress__progress-buffering .mdl-progress {
+    width: 50vw;
+    max-width: 260px;
+  }
+</style>
+
+{% include "progress-buffering.html" %}
diff --git a/node_modules/material-design-lite/src/progress/snippets/progress-buffering.html b/node_modules/material-design-lite/src/progress/snippets/progress-buffering.html
new file mode 100644
index 0000000..79d5166
--- /dev/null
+++ b/node_modules/material-design-lite/src/progress/snippets/progress-buffering.html
@@ -0,0 +1,8 @@
+<!-- MDL Progress Bar with Buffering -->
+<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>
diff --git a/node_modules/material-design-lite/src/progress/snippets/progress-default-demo.html b/node_modules/material-design-lite/src/progress/snippets/progress-default-demo.html
new file mode 100644
index 0000000..cd73609
--- /dev/null
+++ b/node_modules/material-design-lite/src/progress/snippets/progress-default-demo.html
@@ -0,0 +1,7 @@
+<style>
+  .demo-progress__progress-default .mdl-progress {
+    width: 50vw;
+    max-width: 260px;
+  }
+</style>
+{% include "progress-default.html" %}
diff --git a/node_modules/material-design-lite/src/progress/snippets/progress-default.html b/node_modules/material-design-lite/src/progress/snippets/progress-default.html
new file mode 100644
index 0000000..79d5c38
--- /dev/null
+++ b/node_modules/material-design-lite/src/progress/snippets/progress-default.html
@@ -0,0 +1,7 @@
+<!-- Simple MDL Progress Bar -->
+<div id="p1" class="mdl-progress mdl-js-progress"></div>
+<script>
+  document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
+    this.MaterialProgress.setProgress(44);
+  });
+</script>
diff --git a/node_modules/material-design-lite/src/progress/snippets/progress-indeterminate-demo.html b/node_modules/material-design-lite/src/progress/snippets/progress-indeterminate-demo.html
new file mode 100644
index 0000000..8360d5b
--- /dev/null
+++ b/node_modules/material-design-lite/src/progress/snippets/progress-indeterminate-demo.html
@@ -0,0 +1,7 @@
+<style>
+  .demo-progress__progress-indeterminate .mdl-progress {
+    width: 50vw;
+    max-width: 260px;
+  }
+</style>
+{% include "progress-indeterminate.html" %}
diff --git a/node_modules/material-design-lite/src/progress/snippets/progress-indeterminate.html b/node_modules/material-design-lite/src/progress/snippets/progress-indeterminate.html
new file mode 100644
index 0000000..e0e21c7
--- /dev/null
+++ b/node_modules/material-design-lite/src/progress/snippets/progress-indeterminate.html
@@ -0,0 +1,2 @@
+<!-- MDL Progress Bar with Indeterminate Progress -->
+<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>