src/third_party/polymer/components/paper-progress/demo.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4   <title>paper-progress</title>
   5
   6   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
   7   <meta name="mobile-web-app-capable" content="yes">
   8   <meta name="apple-mobile-web-app-capable" content="yes">
   9
  10   <script src="../platform/platform.js"></script>
  11
  12   <link rel="import" href="paper-progress.html">
  13   <link rel="import" href="../paper-button/paper-button.html">
  14
  15   <style shim-shadowdom>
  16
  17     body {
  18       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  19       margin: 0;
  20       padding: 24px;
  21     }
  22
  23     paper-progress {
  24       display: block;
  25       width: 100%;
  26       padding: 25px 0;
  27     }
  28
  29     paper-progress.pink::shadow #activeProgress {
  30       background-color: #e91e63;
  31     }
  32
  33     paper-progress.pink::shadow #secondaryProgress {
  34       background-color: #f8bbd0;
  35     }
  36
  37   </style>
  38
  39 </head>
  40 <body unresolved>
  41
  42   <paper-progress></paper-progress>
  43
  44   <paper-button raisedButton label="Start" onclick="startProgress();"></paper-button>
  45
  46   <br><br><br>
  47
  48   <paper-progress value="40"></paper-progress><br>
  49
  50   <paper-progress value="800" min="100" max="1000"></paper-progress><br>
  51
  52   <paper-progress value="40" secondaryProgress="80"></paper-progress><br>
  53
  54   <paper-progress value="200" max="200"></paper-progress><br>
  55
  56   <paper-progress class="pink" value="80"></paper-progress><br>
  57
  58   <paper-progress class="pink" value="40" secondaryProgress="80"></paper-progress>
  59
  60   <script>
  61
  62     var progress = document.querySelector('paper-progress');
  63     var button = document.querySelector('paper-button');
  64
  65     var repeat, maxRepeat = 5, animating = false;
  66
  67     function nextProgress() {
  68       animating = true;
  69       if (progress.value < progress.max) {
  70         progress.value += (progress.step || 1);
  71       } else {
  72         if (++repeat >= maxRepeat) {
  73           animating = false;
  74           button.disabled = false;
  75           return;
  76         }
  77         progress.value = progress.min;
  78       }
  79       progress.async(nextProgress);
  80     }
  81
  82     function startProgress() {
  83       repeat = 0;
  84       progress.value = progress.min;
  85       button.disabled = true;
  86       if (!animating) {
  87         nextProgress();
  88       }
  89     }
  90
  91     addEventListener('polymer-ready', function() {
  92       startProgress();
  93     });
  94
  95   </script>
  96
  97 </body>
  98 </html>