

<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>