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