third_party/polymer/components-chromium/paper-spinner/demo.html

   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>