• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2    @license
3    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4    This code may only be used under the BSD style license found at http://polymer.github.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/CONTRIBUTORS.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/PATENTS.txt
9-->
10<link rel="import" href="../polymer/polymer.html">
11
12<!--
13Element providing material design circular spinner.
14
15##### Example
16
17    <paper-spinner active></paper-spinner>
18
19The default spinner cycles between blue, red, yellow and green. It can be customized so
20that it uses one color only.
21
22##### Example
23
24    <style shim-shadowdom>
25      paper-spinner.blue::shadow .circle {
26        border-color: #4285f4;
27      }
28    </style>
29
30    <paper-spinner class="blue" active></paper-spinner>
31
32Alt attribute should be set to provide adequate context for accessibility. If not provided,
33it defaults to 'loading'.
34Empty alt can be provided to mark the element as decorative if alternative content is provided
35in another form (e.g. a text block following the spinner).
36
37##### Example
38  <paper-spinner alt="Loading contacts list" active></paper-spinner>
39
40@element paper-spinner
41@blurb Element providing material design circular spinner.
42@status alpha
43@homepage http://polymerlabs.github.io/paper-spinner
44-->
45
46<polymer-element name="paper-spinner" attributes="active alt" role="progressbar">
47  <template>
48    <link rel="stylesheet" href="paper-spinner.css">
49
50    <div id="spinnerContainer">
51      <div class="spinner-layer blue">
52        <div class="circle-clipper left">
53          <div class="circle" fit></div>
54        </div><div class="gap-patch">
55          <div class="circle" fit></div>
56        </div><div class="circle-clipper right">
57          <div class="circle" fit></div>
58        </div>
59      </div>
60
61      <div class="spinner-layer red">
62        <div class="circle-clipper left">
63          <div class="circle" fit></div>
64        </div><div class="gap-patch">
65          <div class="circle" fit></div>
66        </div><div class="circle-clipper right">
67          <div class="circle" fit></div>
68        </div>
69      </div>
70
71      <div class="spinner-layer yellow">
72        <div class="circle-clipper left">
73          <div class="circle" fit></div>
74        </div><div class="gap-patch">
75          <div class="circle" fit></div>
76        </div><div class="circle-clipper right">
77          <div class="circle" fit></div>
78        </div>
79      </div>
80
81      <div class="spinner-layer green">
82        <div class="circle-clipper left">
83          <div class="circle" fit></div>
84        </div><div class="gap-patch">
85          <div class="circle" fit></div>
86        </div><div class="circle-clipper right">
87          <div class="circle" fit></div>
88        </div>
89      </div>
90    </div>
91  </template>
92
93  <script>
94    Polymer({
95      eventDelegates: {
96        'animationend': 'reset',
97        'webkitAnimationEnd': 'reset'
98      },
99      publish: {
100        /**
101         * Displays the spinner.
102         *
103         * @attribute active
104         * @type boolean
105         * @default false
106         */
107        active: {value: false, reflect: true},
108
109        /**
110         * Alternative text content for accessibility support.
111         * If alt is present, it will add an aria-label whose content matches alt when active.
112         * If alt is not present, it will default to 'loading' as the alt value.
113         * @attribute alt
114         * @type string
115         * @default 'loading'
116         */
117        alt: {value: 'loading', reflect: true}
118      },
119
120      ready: function() {
121        // Allow user-provided `aria-label` take preference to any other text alternative.
122        if (this.hasAttribute('aria-label')) {
123          this.alt = this.getAttribute('aria-label');
124        } else {
125          this.setAttribute('aria-label', this.alt);
126        }
127        if (!this.active) {
128          this.setAttribute('aria-hidden', 'true');
129        }
130      },
131
132      activeChanged: function() {
133        if (this.active) {
134          this.$.spinnerContainer.classList.remove('cooldown');
135          this.$.spinnerContainer.classList.add('active');
136          this.removeAttribute('aria-hidden');
137        } else {
138          this.$.spinnerContainer.classList.add('cooldown');
139          this.setAttribute('aria-hidden', 'true');
140        }
141      },
142
143      altChanged: function() {
144        if (this.alt === '') {
145          this.setAttribute('aria-hidden', 'true');
146        } else {
147          this.removeAttribute('aria-hidden');
148        }
149        this.setAttribute('aria-label', this.alt);
150      },
151
152      reset: function() {
153        this.$.spinnerContainer.classList.remove('active', 'cooldown');
154      }
155    });
156  </script>
157</polymer-element>
158