• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10<!doctype html>
11<html>
12<head>
13  <title>paper-progress demo</title>
14
15  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
16  <meta name="mobile-web-app-capable" content="yes">
17  <meta name="apple-mobile-web-app-capable" content="yes">
18
19  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
20  <link rel="import" href="../../paper-styles/color.html">
21  <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
22  <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
23  <link rel="import" href="../paper-progress.html">
24  <link rel="import" href="../../paper-button/paper-button.html">
25
26  <style is="custom-style" include="demo-pages-shared-styles">
27    paper-progress {
28      display: block;
29      width: 100%;
30      margin: 20px 0;
31    }
32    paper-button {
33      display: inline-block;
34      padding: 5px;
35    }
36  </style>
37
38</head>
39<body unresolved>
40  <div class="vertical-section-container centered">
41    <h3>paper-progress can be imperatively controlled</h3>
42    <demo-snippet class="centered-demo">
43      <template>
44        <p>Once started, loops 5 times before stopping.
45          <!-- View the source code to see the contents of startProgress() -->
46          <paper-button raised onclick="startProgress();" id="start">Start</paper-button>
47        </p>
48        <paper-progress id="progress"></paper-progress>
49      </template>
50    </demo-snippet>
51
52    <h3>paper-progress can be indeterminate with a custom duration</h3>
53    <demo-snippet class="centered-demo">
54      <template>
55        <style is="custom-style">
56          paper-progress.slow {
57            --paper-progress-indeterminate-cycle-duration: 20s;
58          }
59        </style>
60        <paper-progress indeterminate></paper-progress>
61        <paper-progress indeterminate class="slow"></paper-progress>
62      </template>
63    </demo-snippet>
64
65    <h3>It can be styled using custom properties</h3>
66    <demo-snippet class="centered-demo">
67      <template>
68        <style is="custom-style">
69          paper-progress.blue {
70            --paper-progress-active-color: var(--paper-light-blue-500);
71            --paper-progress-secondary-color: var(--paper-light-blue-100);
72          }
73
74          paper-progress.red {
75            --paper-progress-active-color: var(--paper-red-500);
76            --paper-progress-secondary-color: var(--paper-red-100);
77          }
78
79          paper-progress.green {
80            --paper-progress-active-color: var(--paper-light-green-500);
81            --paper-progress-secondary-color: var(--paper-light-green-100);
82          }
83        </style>
84        <paper-progress value="800" min="100" max="1000" class="red"></paper-progress>
85        <paper-progress value="60" class="green"></paper-progress>
86        <paper-progress value="40" secondary-progress="80" class="blue"></paper-progress>
87      </template>
88    </demo-snippet>
89  </div>
90
91  <script>
92    var progress, button;
93    var repeat, maxRepeat = 5, animating = false;
94
95    function nextProgress() {
96      animating = true;
97      if (progress.value < progress.max) {
98        progress.value += (progress.step || 1);
99      } else {
100        if (++repeat >= maxRepeat) {
101          animating = false;
102          button.disabled = false;
103          return;
104        }
105        progress.value = progress.min;
106      }
107      requestAnimationFrame(nextProgress);
108    }
109
110    function startProgress() {
111      repeat = 0;
112      progress.value = progress.min;
113      button.disabled = true;
114      if (!animating) {
115        nextProgress();
116      }
117    }
118
119    window.addEventListener('WebComponentsReady', function() {
120      progress = document.querySelector('paper-progress');
121      button = document.querySelector('paper-button');
122    });
123
124  </script>
125
126</body>
127</html>
128