OLD | NEW |
(Empty) | |
| 1 paper-spinner |
| 2 ============= |
| 3 |
| 4 Element providing material design circular spinner. |
| 5 |
| 6 ##### Example |
| 7 |
| 8 ```html |
| 9 <paper-spinner active></paper-spinner> |
| 10 ``` |
| 11 |
| 12 The default spinner cycles between four layers of colors; by default they are |
| 13 blue, red, yellow and green. It can be customized so that it uses one color only |
| 14 by setting all the layer colors to the same value. |
| 15 |
| 16 ##### Example |
| 17 |
| 18 ```html |
| 19 <style is="custom-style"> |
| 20 paper-spinner .rainbow { |
| 21 --paper-spinner-layer-1-color: yellow; |
| 22 --paper-spinner-layer-2-color: red; |
| 23 --paper-spinner-layer-3-color: blue; |
| 24 --paper-spinner-layer-4-color: green; |
| 25 } |
| 26 |
| 27 paper-spinner .red { |
| 28 --paper-spinner-layer-1-color: red; |
| 29 --paper-spinner-layer-2-color: red; |
| 30 --paper-spinner-layer-3-color: red; |
| 31 --paper-spinner-layer-4-color: red; |
| 32 } |
| 33 </style> |
| 34 ``` |
| 35 |
| 36 Alt attribute should be set to provide adequate context for accessibility. If no
t provided, |
| 37 it defaults to 'loading'. |
| 38 Empty alt can be provided to mark the element as decorative if alternative conte
nt is provided |
| 39 in another form (e.g. a text block following the spinner). |
| 40 |
| 41 ##### Example |
| 42 |
| 43 ```html |
| 44 <paper-spinner alt="Loading contacts list" active></paper-spinner> |
| 45 ``` |
OLD | NEW |