| OLD | NEW | 
 | (Empty) | 
|    1 <!-- |  | 
|    2 @license |  | 
|    3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |  | 
|    4 This code may only be used under the BSD style license found at http://polymer.g
     ithub.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/CONTRI
     BUTORS.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/PATEN
     TS.txt |  | 
|    9 --> |  | 
|   10  |  | 
|   11 <link rel="import" href="../polymer/polymer.html"> |  | 
|   12 <link rel="import" href="../paper-styles/paper-styles.html"> |  | 
|   13 <link rel="import" href="../iron-range-behavior/iron-range-behavior.html"> |  | 
|   14 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html"> |  | 
|   15  |  | 
|   16 <!-- |  | 
|   17 The progress bars are for situations where the percentage completed can be |  | 
|   18 determined. They give users a quick sense of how much longer an operation |  | 
|   19 will take. |  | 
|   20  |  | 
|   21 Example: |  | 
|   22  |  | 
|   23     <paper-progress value="10"></paper-progress> |  | 
|   24  |  | 
|   25 There is also a secondary progress which is useful for displaying intermediate |  | 
|   26 progress, such as the buffer level during a streaming playback progress bar. |  | 
|   27  |  | 
|   28 Example: |  | 
|   29  |  | 
|   30     <paper-progress value="10" secondary-progress="30"></paper-progress> |  | 
|   31  |  | 
|   32 ### Styling progress bar: |  | 
|   33  |  | 
|   34 To change the active progress bar color: |  | 
|   35  |  | 
|   36     paper-progress { |  | 
|   37        --paper-progress-active-color: #e91e63; |  | 
|   38     } |  | 
|   39  |  | 
|   40 To change the secondary progress bar color: |  | 
|   41  |  | 
|   42     paper-progress { |  | 
|   43       --paper-progress-secondary-color: #f8bbd0; |  | 
|   44     } |  | 
|   45  |  | 
|   46 To change the progress bar background color: |  | 
|   47  |  | 
|   48     paper-progress { |  | 
|   49       --paper-progress-container-color: #64ffda; |  | 
|   50     } |  | 
|   51  |  | 
|   52 Add the class `transiting` to a paper-progress to animate the progress bar when |  | 
|   53 the value changed. You can also customize the transition: |  | 
|   54  |  | 
|   55     paper-progress { |  | 
|   56       --paper-progress-transition-duration: 0.08s; |  | 
|   57       --paper-progress-transition-timing-function: ease; |  | 
|   58       --paper-progress-transition-transition-delay: 0s; |  | 
|   59     } |  | 
|   60      |  | 
|   61 @group Paper Elements |  | 
|   62 @element paper-progress |  | 
|   63 @hero hero.svg |  | 
|   64 @demo demo/index.html |  | 
|   65 --> |  | 
|   66  |  | 
|   67 <dom-module id="paper-progress"> |  | 
|   68   <style> |  | 
|   69     :host { |  | 
|   70       display: inline-block; |  | 
|   71       width: 200px; |  | 
|   72       height: 4px; |  | 
|   73     } |  | 
|   74  |  | 
|   75     :host(.transiting) #activeProgress, |  | 
|   76     :host(.transiting) #secondaryProgress { |  | 
|   77       -webkit-transition-property: -webkit-transform; |  | 
|   78       transition-property: transform; |  | 
|   79  |  | 
|   80       /* Duration */ |  | 
|   81       -webkit-transition-duration: var(--paper-progress-transition-duration, 0.0
     8s); |  | 
|   82       transition-duration: var(--paper-progress-transition-duration, 0.08s); |  | 
|   83  |  | 
|   84       /* Timing function */ |  | 
|   85       -webkit-transition-timing-function: var(--paper-progress-transition-timing
     -function, ease); |  | 
|   86       transition-timing-function: var(--paper-progress-transition-timing-functio
     n, ease); |  | 
|   87  |  | 
|   88       /* Delay */ |  | 
|   89       -webkit-transition-delay: var(--paper-progress-transition-delay, 0s); |  | 
|   90       transition-delay: var(--paper-progress-transition-delay, 0s); |  | 
|   91     } |  | 
|   92  |  | 
|   93     #progressContainer { |  | 
|   94       position: relative; |  | 
|   95       height: 100%; |  | 
|   96       background-color: var(--paper-progress-container-color, --google-grey-300)
     ; |  | 
|   97       overflow: hidden; |  | 
|   98     } |  | 
|   99  |  | 
|  100     #activeProgress, |  | 
|  101     #secondaryProgress { |  | 
|  102       -webkit-transform-origin: left center; |  | 
|  103       transform-origin: left center; |  | 
|  104       -webkit-transform: scaleX(0); |  | 
|  105       transform: scaleX(0); |  | 
|  106     } |  | 
|  107  |  | 
|  108     #activeProgress { |  | 
|  109       background-color: var(--paper-progress-active-color, --google-green-500); |  | 
|  110     } |  | 
|  111  |  | 
|  112     #secondaryProgress { |  | 
|  113       background-color: var(--paper-progress-secondary-color, --google-green-100
     ); |  | 
|  114     } |  | 
|  115  |  | 
|  116     #activeProgress.indeterminate { |  | 
|  117       -webkit-transform-origin: center center; |  | 
|  118       transform-origin: center center; |  | 
|  119       -webkit-animation: indeterminate-bar 1s linear infinite; |  | 
|  120       animation: indeterminate-bar 1s linear infinite; |  | 
|  121     } |  | 
|  122  |  | 
|  123     @-webkit-keyframes indeterminate-bar { |  | 
|  124       0% { |  | 
|  125         -webkit-transform: translate(-50%) scaleX(0); |  | 
|  126       } |  | 
|  127       50% { |  | 
|  128         -webkit-transform: translate(0%) scaleX(0.3); |  | 
|  129       } |  | 
|  130       100% { |  | 
|  131         -webkit-transform: translate(50%) scaleX(0); |  | 
|  132       } |  | 
|  133     } |  | 
|  134  |  | 
|  135     @keyframes indeterminate-bar { |  | 
|  136       0% { |  | 
|  137         transform: translate(-50%) scaleX(0); |  | 
|  138       } |  | 
|  139       50% { |  | 
|  140         transform: translate(0%) scaleX(0.3); |  | 
|  141       } |  | 
|  142       100% { |  | 
|  143         transform: translate(50%) scaleX(0); |  | 
|  144       } |  | 
|  145     } |  | 
|  146   </style> |  | 
|  147   <template> |  | 
|  148     <div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" ar
     ia-valuemin$="{{min}}" aria-valuemax$="{{max}}"> |  | 
|  149       <div id="secondaryProgress" class="fit"></div> |  | 
|  150       <div id="activeProgress" class="fit"></div> |  | 
|  151     </div> |  | 
|  152   </template> |  | 
|  153 </dom-module> |  | 
|  154  |  | 
|  155 <script> |  | 
|  156   Polymer({ |  | 
|  157  |  | 
|  158     is: 'paper-progress', |  | 
|  159  |  | 
|  160     behaviors: [ |  | 
|  161       Polymer.IronRangeBehavior |  | 
|  162     ], |  | 
|  163  |  | 
|  164     properties: { |  | 
|  165  |  | 
|  166       /** |  | 
|  167        * The number that represents the current secondary progress. |  | 
|  168        */ |  | 
|  169       secondaryProgress: { |  | 
|  170         type: Number, |  | 
|  171         value: 0, |  | 
|  172         notify: true |  | 
|  173       }, |  | 
|  174  |  | 
|  175       /** |  | 
|  176        * The secondary ratio |  | 
|  177        */ |  | 
|  178       secondaryRatio: { |  | 
|  179         type: Number, |  | 
|  180         value: 0, |  | 
|  181         readOnly: true, |  | 
|  182         observer: '_secondaryRatioChanged' |  | 
|  183       }, |  | 
|  184  |  | 
|  185       /** |  | 
|  186        * Use an indeterminate progress indicator. |  | 
|  187        */ |  | 
|  188       indeterminate: { |  | 
|  189         type: Boolean, |  | 
|  190         value: false, |  | 
|  191         notify: true, |  | 
|  192         observer: '_toggleIndeterminate' |  | 
|  193       } |  | 
|  194     }, |  | 
|  195  |  | 
|  196     observers: [ |  | 
|  197       '_ratioChanged(ratio)', |  | 
|  198       '_secondaryProgressChanged(secondaryProgress, min, max)' |  | 
|  199     ], |  | 
|  200  |  | 
|  201     _toggleIndeterminate: function() { |  | 
|  202       // If we use attribute/class binding, the animation sometimes doesn't tran
     slate properly |  | 
|  203       // on Safari 7.1. So instead, we toggle the class here in the update metho
     d. |  | 
|  204       this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgres
     s); |  | 
|  205     }, |  | 
|  206  |  | 
|  207     _transformProgress: function(progress, ratio) { |  | 
|  208       var transform = 'scaleX(' + (ratio / 100) + ')'; |  | 
|  209       progress.style.transform = progress.style.webkitTransform = transform; |  | 
|  210     }, |  | 
|  211  |  | 
|  212     _ratioChanged: function(ratio) { |  | 
|  213       this._transformProgress(this.$.activeProgress, ratio); |  | 
|  214     }, |  | 
|  215  |  | 
|  216     _secondaryRatioChanged: function(secondaryRatio) { |  | 
|  217       this._transformProgress(this.$.secondaryProgress, secondaryRatio); |  | 
|  218     }, |  | 
|  219  |  | 
|  220     _secondaryProgressChanged: function() { |  | 
|  221       this.secondaryProgress = this._clampValue(this.secondaryProgress); |  | 
|  222       this._setSecondaryRatio(this._calcRatio(this.secondaryProgress) * 100); |  | 
|  223     } |  | 
|  224  |  | 
|  225   }); |  | 
|  226  |  | 
|  227 </script> |  | 
| OLD | NEW |