diff --git a/node_modules/material-design-lite/dist/components/spinner/demo.html b/node_modules/material-design-lite/dist/components/spinner/demo.html
new file mode 100644
index 0000000..642d01d
--- /dev/null
+++ b/node_modules/material-design-lite/dist/components/spinner/demo.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>spinner test</title>
+
+        <!-- Fonts -->
+    <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
+
+    <!-- Page styles -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
+    <link rel="stylesheet" href="../../material.min.css">
+    <link rel="stylesheet" href="../../components/demos.css">
+    <script src="../../material.min.js"></script>
+
+    
+    <style>
+      
+    </style>
+
+  </head>
+  <body>
+
+    <div style="padding-top: 24px;">
+      
+        
+<!-- MDL Spinner Component -->
+<div class="mdl-spinner mdl-js-spinner is-active"></div>
+
+<!-- MDL Spinner Component with Single Color -->
+<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
+
+      
+    </div>
+    <!-- Built with love using Material Design Lite -->
+
+    
+    <script>
+      
+    </script>
+  </body>
+</html>
diff --git a/node_modules/material-design-lite/dist/components/spinner/index.html b/node_modules/material-design-lite/dist/components/spinner/index.html
new file mode 100755
index 0000000..64ee706
--- /dev/null
+++ b/node_modules/material-design-lite/dist/components/spinner/index.html
@@ -0,0 +1,61 @@
+
+
+
+<h2 id="introduction">Introduction</h2>
+<p>The Material Design Lite (MDL) <strong>spinner</strong> component is an enhanced replacement for the classic &quot;wait cursor&quot; (which varies significantly among hardware and software versions) and indicates that there is an ongoing process, the results of which are not yet available. A spinner consists of an open circle that changes colors as it animates in a clockwise direction, and clearly communicates that a process has been started but not completed.</p>
+<p>A spinner performs no action itself, either by its display nor when the user clicks or touches it, and does not indicate a process&#39;s specific progress or degree of completion. The MDL spinner component provides various types of spinners, and allows you to add display effects.</p>
+<p>Spinners are a fairly new feature of most user interfaces, and provide users with a consistent visual cue about ongoing activity, regardless of hardware device,  operating system, or browser environment. Their design and use is an important factor in the overall user experience.</p>
+<h3 id="to-include-an-mdl-spinner-component-">To include an MDL <strong>spinner</strong> component:</h3>
+<p>&nbsp;1. Code an element, such as a <code>&lt;div&gt;</code>, <code>&lt;p&gt;</code>, or <code>&lt;span&gt;</code>, to contain the spinner; the element should have no content of its own.</p>
+<pre><code class="lang-html">&lt;div&gt;&lt;/div&gt;
+</code></pre>
+<p>&nbsp;2. Add one or more MDL classes, separated by spaces, to the container using the <code>class</code> attribute.</p>
+<pre><code class="lang-html">&lt;div class=&quot;mdl-spinner mdl-js-spinner is-active&quot;&gt;&lt;/div&gt;
+</code></pre>
+<p>The spinner component is ready for use.</p>
+<h4 id="examples">Examples</h4>
+<p>A default spinner in a div.</p>
+<pre><code class="lang-html">&lt;div class=&quot;mdl-spinner mdl-js-spinner is-active&quot;&gt;&lt;/div&gt;
+</code></pre>
+<p>A single-color spinner in a paragraph.</p>
+<pre><code class="lang-html">&lt;p class=&quot;mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active&quot;&gt;&lt;/p&gt;
+</code></pre>
+<h2 id="configuration-options">Configuration options</h2>
+<p>The MDL CSS classes apply various predefined visual enhancements to the spinner. The table below lists the available classes and their effects.</p>
+<table>
+<thead>
+<tr>
+<th>MDL class</th>
+<th>Effect</th>
+<th>Remarks</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>mdl-spinner</code></td>
+<td>Defines the container as an MDL spinner component</td>
+<td>Required</td>
+</tr>
+<tr>
+<td><code>mdl-js-spinner</code></td>
+<td>Assigns basic MDL behavior to spinner</td>
+<td>Required</td>
+</tr>
+<tr>
+<td><code>is-active</code></td>
+<td>Makes the spinner visible and animated</td>
+<td>Optional</td>
+</tr>
+<tr>
+<td><code>mdl-spinner--single-color</code></td>
+<td>Uses a single (primary palette) color instead of changing colors</td>
+<td>Optional</td>
+</tr>
+</tbody>
+</table>
+<blockquote>
+<p><strong>Note:</strong> There is no specific <em>disabled</em> version of a spinner; the presence or absence of the <code>is-active</code> class determines whether the spinner is visible. For example, this spinner is inactive and invisible: <code>&lt;div class=&quot;mdl-spinner mdl-js-spinner&quot;&gt;&lt;/div&gt;</code>
+This attribute may be added or removed programmatically via scripting.</p>
+</blockquote>
+
+