• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!doctype html>
2<!--
3@license
4Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject 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