OLD | NEW |
| (Empty) |
1 | |
2 <!--- | |
3 | |
4 This README is automatically generated from the comments in these files: | |
5 paper-spinner-behavior.html paper-spinner-lite.html paper-spinner.html | |
6 | |
7 Edit those files, and our readme bot will duplicate them over here! | |
8 Edit this file, and the bot will squash your changes :) | |
9 | |
10 The bot does some handling of markdown. Please file a bug if it does the wrong | |
11 thing! https://github.com/PolymerLabs/tedium/issues | |
12 | |
13 --> | |
14 | |
15 [](https://travis-ci.org/PolymerElements/paper-spinner) | |
16 | |
17 _[Demo and API docs](https://elements.polymer-project.org/elements/paper-spinner
)_ | |
18 | |
19 | |
20 ##<paper-spinner> | |
21 | |
22 Material design: [Progress & activity](https://www.google.com/design/spec/compon
ents/progress-activity.html) | |
23 | |
24 Element providing a multiple color material design circular spinner. | |
25 | |
26 ```html | |
27 <paper-spinner active></paper-spinner> | |
28 ``` | |
29 | |
30 The default spinner cycles between four layers of colors; by default they are | |
31 blue, red, yellow and green. It can be customized to cycle between four differen
t | |
32 colors. Use <paper-spinner-lite> for single color spinners. | |
33 | |
34 ### Accessibility | |
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 ```html | |
42 <paper-spinner alt="Loading contacts list" active></paper-spinner> | |
43 ``` | |
44 | |
45 ### Styling | |
46 | |
47 The following custom properties and mixins are available for styling: | |
48 | |
49 | Custom property | Description | Default | | |
50 | --- | --- | --- | | |
51 | `--paper-spinner-layer-1-color` | Color of the first spinner rotation | `--goo
gle-blue-500` | | |
52 | `--paper-spinner-layer-2-color` | Color of the second spinner rotation | `--go
ogle-red-500` | | |
53 | `--paper-spinner-layer-3-color` | Color of the third spinner rotation | `--goo
gle-yellow-500` | | |
54 | `--paper-spinner-layer-4-color` | Color of the fourth spinner rotation | `--go
ogle-green-500` | | |
55 | `--paper-spinner-stroke-width` | The width of the spinner stroke | 3px | | |
56 | |
57 | |
58 | |
59 ##<paper-spinner-lite> | |
60 | |
61 Material design: [Progress & activity](https://www.google.com/design/spec/compon
ents/progress-activity.html) | |
62 | |
63 Element providing a single color material design circular spinner. | |
64 | |
65 ```html | |
66 <paper-spinner-lite active></paper-spinner-lite> | |
67 ``` | |
68 | |
69 The default spinner is blue. It can be customized to be a different color. | |
70 | |
71 ### Accessibility | |
72 | |
73 Alt attribute should be set to provide adequate context for accessibility. If no
t provided, | |
74 it defaults to 'loading'. | |
75 Empty alt can be provided to mark the element as decorative if alternative conte
nt is provided | |
76 in another form (e.g. a text block following the spinner). | |
77 | |
78 ```html | |
79 <paper-spinner-lite alt="Loading contacts list" active></paper-spinner-lite> | |
80 ``` | |
81 | |
82 ### Styling | |
83 | |
84 The following custom properties and mixins are available for styling: | |
85 | |
86 | Custom property | Description | Default | | |
87 | --- | --- | --- | | |
88 | `--paper-spinner-color` | Color of the spinner | `--google-blue-500` | | |
89 | `--paper-spinner-stroke-width` | The width of the spinner stroke | 3px | | |
90 | |
91 | |
92 | |
93 <!-- No docs for Polymer.PaperSpinnerBehavior found. --> | |
OLD | NEW |