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
