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

   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>