blob: 64ee706fca29fbbc38d543a275643c922d88eff7 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001
2
3
4<h2 id="introduction">Introduction</h2>
5<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>
6<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>
7<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>
8<h3 id="to-include-an-mdl-spinner-component-">To include an MDL <strong>spinner</strong> component:</h3>
9<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>
10<pre><code class="lang-html">&lt;div&gt;&lt;/div&gt;
11</code></pre>
12<p>&nbsp;2. Add one or more MDL classes, separated by spaces, to the container using the <code>class</code> attribute.</p>
13<pre><code class="lang-html">&lt;div class=&quot;mdl-spinner mdl-js-spinner is-active&quot;&gt;&lt;/div&gt;
14</code></pre>
15<p>The spinner component is ready for use.</p>
16<h4 id="examples">Examples</h4>
17<p>A default spinner in a div.</p>
18<pre><code class="lang-html">&lt;div class=&quot;mdl-spinner mdl-js-spinner is-active&quot;&gt;&lt;/div&gt;
19</code></pre>
20<p>A single-color spinner in a paragraph.</p>
21<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;
22</code></pre>
23<h2 id="configuration-options">Configuration options</h2>
24<p>The MDL CSS classes apply various predefined visual enhancements to the spinner. The table below lists the available classes and their effects.</p>
25<table>
26<thead>
27<tr>
28<th>MDL class</th>
29<th>Effect</th>
30<th>Remarks</th>
31</tr>
32</thead>
33<tbody>
34<tr>
35<td><code>mdl-spinner</code></td>
36<td>Defines the container as an MDL spinner component</td>
37<td>Required</td>
38</tr>
39<tr>
40<td><code>mdl-js-spinner</code></td>
41<td>Assigns basic MDL behavior to spinner</td>
42<td>Required</td>
43</tr>
44<tr>
45<td><code>is-active</code></td>
46<td>Makes the spinner visible and animated</td>
47<td>Optional</td>
48</tr>
49<tr>
50<td><code>mdl-spinner--single-color</code></td>
51<td>Uses a single (primary palette) color instead of changing colors</td>
52<td>Optional</td>
53</tr>
54</tbody>
55</table>
56<blockquote>
57<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>
58This attribute may be added or removed programmatically via scripting.</p>
59</blockquote>
60
61