Home | History | Annotate | Download | only in paper-progress 
      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>
     99