third_party/ot-br-posix/repo/third_party/mdl/repo/src/spinner/README.md

   1 ## Introduction
   2
   3 The Material Design Lite (MDL) **spinner** component is an enhanced replacement for the classic "wait cursor" (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.
   4
   5 A spinner performs no action itself, either by its display nor when the user clicks or touches it, and does not indicate a process's specific progress or degree of completion. The MDL spinner component provides various types of spinners, and allows you to add display effects.
   6
   7 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.
   8
   9 ### To include an MDL **spinner** component:
  10
  11 &nbsp;1. Code an element, such as a `<div>`, `<p>`, or `<span>`, to contain the spinner; the element should have no content of its own.
  12 ```html
  13 <div></div>
  14 ```
  15 &nbsp;2. Add one or more MDL classes, separated by spaces, to the container using the `class` attribute.
  16 ```html
  17 <div class="mdl-spinner mdl-js-spinner is-active"></div>
  18 ```
  19
  20 The spinner component is ready for use.
  21
  22 #### Examples
  23
  24 A default spinner in a div.
  25
  26 ```html
  27 <div class="mdl-spinner mdl-js-spinner is-active"></div>
  28 ```
  29
  30 A single-color spinner in a paragraph.
  31
  32 ```html
  33 <p class="mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active"></p>
  34 ```
  35
  36 ## Configuration options
  37
  38 The MDL CSS classes apply various predefined visual enhancements to the spinner. The table below lists the available classes and their effects.
  39
  40 | MDL class | Effect | Remarks |
  41 |-----------|--------|---------|
  42 | `mdl-spinner` | Defines the container as an MDL spinner component | Required |
  43 | `mdl-js-spinner` | Assigns basic MDL behavior to spinner | Required |
  44 | `is-active` | Makes the spinner visible and animated | Optional |
  45 | `mdl-spinner--single-color` | Uses a single (primary palette) color instead of changing colors | Optional
  46
  47 >**Note:** There is no specific *disabled* version of a spinner; the presence or absence of the `is-active` class determines whether the spinner is visible. For example, this spinner is inactive and invisible: `<div class="mdl-spinner mdl-js-spinner"></div>`
  48 >This attribute may be added or removed programmatically via scripting.