third_party/polymer/v1_0/components/paper-progress/paper-progress.html

   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.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
  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.08s);
  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-function, 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}}" aria-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 translate properly
 203       // on Safari 7.1. So instead, we toggle the class here in the update method.
 204       this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgress);
 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>