1 <!doctype html> 2 <!-- 3 @license 4 Copyright (c) 2015 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 <title>paper-spinner demo</title> 14 15 <meta charset="UTF-8"> 16 <meta name="apple-mobile-web-app-capable" content="yes"> 17 <meta name="mobile-web-app-capable" content="yes"> 18 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 19 20 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 21 22 <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> 23 <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> 24 <link rel="import" href="../../paper-styles/color.html"> 25 <link rel="import" href="../paper-spinner-lite.html"> 26 <link rel="import" href="../paper-spinner.html"> 27 28 <style is="custom-style" include="demo-pages-shared-styles"> 29 .vertical-section-container { 30 max-width: 550px; 31 } 32 33 paper-spinner, paper-spinner-lite { 34 margin-right: 24px; 35 } 36 </style> 37 </head> 38 <body unresolved> 39 <div class="vertical-section-container centered"> 40 <h3>Spinners can be deactivated or activated</h3> 41 <demo-snippet class="centered-demo"> 42 <template> 43 <paper-spinner></paper-spinner> 44 <paper-spinner active></paper-spinner> 45 46 <paper-spinner-lite></paper-spinner-lite> 47 <paper-spinner-lite active></paper-spinner-lite> 48 49 <button onclick="toggle(event)">Toggle</button> 50 </template> 51 </demo-snippet> 52 53 <h3>Spinners can be styled using custom properties</h3> 54 <demo-snippet class="centered-demo"> 55 <template> 56 <style is="custom-style"> 57 paper-spinner.multi { 58 --paper-spinner-layer-1-color: var(--paper-purple-500); 59 --paper-spinner-layer-2-color: var(--paper-cyan-500); 60 --paper-spinner-layer-3-color: var(--paper-blue-grey-500); 61 --paper-spinner-layer-4-color: var(--paper-amber-500); 62 } 63 paper-spinner-lite.orange { 64 --paper-spinner-color: var(--google-yellow-500); 65 } 66 paper-spinner-lite.green { 67 --paper-spinner-color: var(--google-green-500); 68 } 69 paper-spinner-lite.thin { 70 --paper-spinner-stroke-width: 1px; 71 } 72 paper-spinner-lite.thick { 73 --paper-spinner-stroke-width: 6px; 74 } 75 </style> 76 77 <paper-spinner class="multi" active></paper-spinner> 78 79 <paper-spinner-lite class="orange" active></paper-spinner-lite> 80 <paper-spinner-lite class="green" active></paper-spinner-lite> 81 82 <paper-spinner-lite class="thin" active></paper-spinner-lite> 83 <paper-spinner-lite class="thick" active></paper-spinner-lite> 84 </template> 85 </demo-snippet> 86 </div> 87 88 <script> 89 function toggle(event) { 90 var spinners = event.target.parentElement.querySelectorAll('paper-spinner, paper-spinner-lite'); 91 Array.prototype.forEach.call(spinners, function(spinner) { 92 spinner.active = !spinner.active; 93 }); 94 }; 95 </script> 96 </body> 97 </html> 98
