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