UNPKG

material-design-lite

Version:

Material Design Components in CSS, JS and HTML

62 lines (56 loc) 3.37 kB
<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>