Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(488)

Side by Side Diff: third_party/polymer/v1_0/components/paper-spinner/paper-spinner.html

Issue 1269803005: Remove third_party/polymer from .gitignore (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!--
2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 -->
10
11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../paper-styles/color.html">
13 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
14
15 <!--
16 Element providing material design circular spinner.
17
18 <paper-spinner active></paper-spinner>
19
20 The default spinner cycles between four layers of colors; by default they are
21 blue, red, yellow and green. It can be customized so that it uses one color only
22 by setting all the layer colors to the same value.
23
24 ### Accessibility
25
26 Alt attribute should be set to provide adequate context for accessibility. If no t provided,
27 it defaults to 'loading'.
28 Empty alt can be provided to mark the element as decorative if alternative conte nt is provided
29 in another form (e.g. a text block following the spinner).
30
31 <paper-spinner alt="Loading contacts list" active></paper-spinner>
32
33 ### Styling
34
35 The following custom properties and mixins are available for styling:
36
37 Custom property | Description | Default
38 ----------------|-------------|----------
39 `--paper-spinner-layer-1-color` | Color of the first spinner rotation | `--googl e-blue-500`
40 `--paper-spinner-layer-2-color` | Color of the second spinner rotation | `--goog le-red-500`
41 `--paper-spinner-layer-3-color` | Color of the third spinner rotation | `--googl e-yellow-500`
42 `--paper-spinner-layer-4-color` | Color of the fourth spinner rotation | `--goog le-green-500`
43
44 @group Paper Elements
45 @element paper-spinner
46 @hero hero.svg
47 @demo demo/index.html
48 -->
49
50 <dom-module id="paper-spinner">
51
52 <link rel="import" type="css" href="paper-spinner.css">
53
54 <template>
55
56 <div id="spinnerContainer" class-name="[[_spinnerContainerClassName]]">
57 <div class="spinner-layer layer-1">
58 <div class="circle-clipper left">
59 <div class="circle"></div>
60 </div><div class="gap-patch">
61 <div class="circle"></div>
62 </div><div class="circle-clipper right">
63 <div class="circle"></div>
64 </div>
65 </div>
66
67 <div class="spinner-layer layer-2">
68 <div class="circle-clipper left">
69 <div class="circle"></div>
70 </div><div class="gap-patch">
71 <div class="circle"></div>
72 </div><div class="circle-clipper right">
73 <div class="circle"></div>
74 </div>
75 </div>
76
77 <div class="spinner-layer layer-3">
78 <div class="circle-clipper left">
79 <div class="circle"></div>
80 </div><div class="gap-patch">
81 <div class="circle"></div>
82 </div><div class="circle-clipper right">
83 <div class="circle"></div>
84 </div>
85 </div>
86
87 <div class="spinner-layer layer-4">
88 <div class="circle-clipper left">
89 <div class="circle"></div>
90 </div><div class="gap-patch">
91 <div class="circle"></div>
92 </div><div class="circle-clipper right">
93 <div class="circle"></div>
94 </div>
95 </div>
96 </div>
97
98 </template>
99
100 <script>
101
102 Polymer({
103
104 is: 'paper-spinner',
105
106 listeners: {
107 'animationend': 'reset',
108 'webkitAnimationEnd': 'reset'
109 },
110
111 properties: {
112
113 /**
114 * Displays the spinner.
115 *
116 * @attribute active
117 * @type boolean
118 * @default false
119 */
120 active: {
121 type: Boolean,
122 value: false,
123 reflectToAttribute: true,
124 observer: '_activeChanged'
125 },
126
127 /**
128 * Alternative text content for accessibility support.
129 * If alt is present, it will add an aria-label whose content matches al t when active.
130 * If alt is not present, it will default to 'loading' as the alt value.
131 *
132 * @attribute alt
133 * @type string
134 * @default 'loading'
135 */
136 alt: {
137 type: String,
138 value: 'loading',
139 observer: '_altChanged'
140 },
141
142 /**
143 * True when the spinner is going from active to inactive. This is repre sented by a fade
144 * to 0% opacity to the user.
145 */
146 _coolingDown: {
147 type: Boolean,
148 value: false
149 },
150
151 _spinnerContainerClassName: {
152 type: String,
153 computed: '_computeSpinnerContainerClassName(active, _coolingDown)'
154 }
155
156 },
157
158 _computeSpinnerContainerClassName: function(active, coolingDown) {
159 return [
160 active || coolingDown ? 'active' : '',
161 coolingDown ? 'cooldown' : ''
162 ].join(' ');
163 },
164
165 _activeChanged: function(active, old) {
166 this._setAriaHidden(!active);
167 if (!active && old) {
168 this._coolingDown = true;
169 }
170 },
171
172 _altChanged: function(alt) {
173 // user-provided `aria-label` takes precedence over prototype default
174 if (alt === this.getPropertyInfo('alt').value) {
175 this.alt = this.getAttribute('aria-label') || alt;
176 } else {
177 this._setAriaHidden(alt==='');
178 this.setAttribute('aria-label', alt);
179 }
180 },
181
182 _setAriaHidden: function(hidden) {
183 var attr = 'aria-hidden';
184 if (hidden) {
185 this.setAttribute(attr, 'true');
186 } else {
187 this.removeAttribute(attr);
188 }
189 },
190
191 reset: function() {
192 this.active = false;
193 this._coolingDown = false;
194 }
195
196 });
197
198 </script>
199
200 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698