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 |