• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2    @license
3    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7    Code distributed by Google as part of the polymer project is also
8    subject 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</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.js"></script>
20
21  <link rel="import" href="paper-progress.html">
22  <link rel="import" href="../paper-button/paper-button.html">
23
24  <style shim-shadowdom>
25
26    body {
27      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
28      margin: 0;
29      padding: 24px;
30    }
31
32    paper-progress {
33      display: block;
34      width: 100%;
35      padding: 25px 0;
36    }
37
38    paper-progress.pink::shadow #activeProgress {
39      background-color: #e91e63;
40    }
41
42    paper-progress.pink::shadow #secondaryProgress {
43      background-color: #f8bbd0;
44    }
45
46  </style>
47
48</head>
49<body unresolved>
50
51  <paper-progress></paper-progress>
52
53  <paper-button raised onclick="startProgress();">Start</paper-button>
54
55  <br><br><br>
56
57  <paper-progress></paper-progress><br>
58
59  <paper-progress value="40"></paper-progress><br>
60
61  <paper-progress value="800" min="100" max="1000"></paper-progress><br>
62
63  <paper-progress value="40" secondaryProgress="80"></paper-progress><br>
64
65  <paper-progress value="200" max="200"></paper-progress><br>
66
67  <paper-progress indeterminate></paper-progress><br>
68
69  <paper-progress class="pink" value="80"></paper-progress><br>
70
71  <paper-progress class="pink" value="40" secondaryProgress="80"></paper-progress><br>
72
73  <paper-progress class="pink" indeterminate></paper-progress><br>
74
75  <script>
76
77    var progress = document.querySelector('paper-progress');
78    var button = document.querySelector('paper-button');
79
80    var repeat, maxRepeat = 5, animating = false;
81
82    function nextProgress() {
83      animating = true;
84      if (progress.value < progress.max) {
85        progress.value += (progress.step || 1);
86      } else {
87        if (++repeat >= maxRepeat) {
88          animating = false;
89          button.disabled = false;
90          return;
91        }
92        progress.value = progress.min;
93      }
94      progress.async(nextProgress);
95    }
96
97    function startProgress() {
98      repeat = 0;
99      progress.value = progress.min;
100      button.disabled = true;
101      if (!animating) {
102        nextProgress();
103      }
104    }
105
106    addEventListener('polymer-ready', function() {
107      startProgress();
108    });
109
110  </script>
111
112</body>
113</html>
114