1<!DOCTYPE html>
2<!--
3    @license
4    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
5    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8    Code distributed by Google as part of the polymer project is also
9    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10-->
11<html lang="en">
12<head>
13  <meta charset="UTF-8">
14  <title></title>
15  <script src="../webcomponentsjs/webcomponents.js"></script>
16  <link rel="import" href="paper-spinner.html">
17  <style shim-shadowdom>
18  paper-spinner.blue::shadow .circle {
19    border-color: #4285f4;
20  }
21
22  paper-spinner.red::shadow .circle {
23    border-color: #db4437;
24  }
25
26  paper-spinner.yellow::shadow .circle {
27    border-color: #f4b400;
28  }
29
30  paper-spinner.green::shadow .circle {
31    border-color: #0f9d58;
32  }
33  </style>
34</head>
35<body>
36  <paper-spinner class="blue" active></paper-spinner>
37  <paper-spinner class="red" active></paper-spinner>
38  <paper-spinner class="yellow" active></paper-spinner>
39  <paper-spinner class="green" active></paper-spinner>
40  <paper-spinner active></paper-spinner>
41  <button>Toggle</button>
42  <script>
43    document.querySelector('button').addEventListener('click', function() {
44      var spinners = document.querySelectorAll('paper-spinner');
45      Array.prototype.forEach.call(spinners, function(spinner) {
46        spinner.active = !spinner.active;
47      });
48    });
49  </script>
50</body>
51</html>
52