third_party/polymer/v1_0/components-chromium/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 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../paper-styles/paper-styles.html">
  11 <link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
  12 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
  13
  14 <!--
  15 The progress bars are for situations where the percentage completed can be
  16 determined. They give users a quick sense of how much longer an operation
  17 will take.
  18
  19 Example:
  20
  21     <paper-progress value="10"></paper-progress>
  22
  23 There is also a secondary progress which is useful for displaying intermediate
  24 progress, such as the buffer level during a streaming playback progress bar.
  25
  26 Example:
  27
  28     <paper-progress value="10" secondary-progress="30"></paper-progress>
  29
  30 ### Styling progress bar:
  31
  32 To change the active progress bar color:
  33
  34     paper-progress {
  35        --paper-progress-active-color: #e91e63;
  36     }
  37
  38 To change the secondary progress bar color:
  39
  40     paper-progress {
  41       --paper-progress-secondary-color: #f8bbd0;
  42     }
  43
  44 To change the progress bar background color:
  45
  46     paper-progress {
  47       --paper-progress-container-color: #64ffda;
  48     }
  49
  50 Add the class `transiting` to a paper-progress to animate the progress bar when
  51 the value changed. You can also customize the transition:
  52
  53     paper-progress {
  54       --paper-progress-transition-duration: 0.08s;
  55       --paper-progress-transition-timing-function: ease;
  56       --paper-progress-transition-transition-delay: 0s;
  57     }
  58
  59 The following mixins are available for styling:
  60
  61
  62
  63 Custom property | Description | Default
  64 ----------------|-------------|----------
  65 `--paper-progress-container` | Mixin applied to container | `{}`
  66
  67
  68
  69
  70 @group Paper Elements
  71 @element paper-progress
  72 @hero hero.svg
  73 @demo demo/index.html
  74 -->
  75
  76 </head><body><dom-module id="paper-progress">
  77   <style>
  78     :host {
  79       display: inline-block;
  80       width: 200px;
  81       height: 4px;
  82     }
  83
  84     :host(.transiting) #activeProgress,
  85     :host(.transiting) #secondaryProgress {
  86       -webkit-transition-property: -webkit-transform;
  87       transition-property: transform;
  88
  89       /* Duration */
  90       -webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s);
  91       transition-duration: var(--paper-progress-transition-duration, 0.08s);
  92
  93       /* Timing function */
  94       -webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease);
  95       transition-timing-function: var(--paper-progress-transition-timing-function, ease);
  96
  97       /* Delay */
  98       -webkit-transition-delay: var(--paper-progress-transition-delay, 0s);
  99       transition-delay: var(--paper-progress-transition-delay, 0s);
 100     }
 101
 102     #progressContainer {
 103       position: relative;
 104       height: 100%;
 105       overflow: hidden;
 106       @apply(--paper-progress-container);
 107     }
 108
 109     #progressContainer, #indeterminateSplitter {
 110       background-color: var(--paper-progress-container-color, --google-grey-300);
 111     }
 112
 113     #activeProgress,
 114     #secondaryProgress {
 115       -webkit-transform-origin: left center;
 116       transform-origin: left center;
 117       -webkit-transform: scaleX(0);
 118       transform: scaleX(0);
 119     }
 120
 121     #activeProgress {
 122       background-color: var(--paper-progress-active-color, --google-green-500);
 123     }
 124
 125     #secondaryProgress {
 126       background-color: var(--paper-progress-secondary-color, --google-green-100);
 127     }
 128
 129     #indeterminateSplitter {
 130       display: none;
 131     }
 132
 133     #activeProgress.indeterminate {
 134       -webkit-transform-origin: right center;
 135       transform-origin: right center;
 136       -webkit-animation: indeterminate-bar 2s linear infinite;
 137       animation: indeterminate-bar 2s linear infinite;
 138     }
 139
 140     #indeterminateSplitter.indeterminate {
 141       display: block;
 142       -webkit-transform-origin: center center;
 143       transform-origin: center center;
 144       -webkit-animation: indeterminate-splitter 2s linear infinite;
 145       animation: indeterminate-splitter 2s linear infinite;
 146     }
 147
 148     @-webkit-keyframes indeterminate-bar {
 149       0% {
 150         -webkit-transform: scaleX(1) translateX(-100%);
 151       }
 152       50% {
 153         -webkit-transform: scaleX(1) translateX(0%);
 154       }
 155       75% {
 156         -webkit-transform: scaleX(1) translateX(0%);
 157         -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91);
 158       }
 159       100% {
 160         -webkit-transform: scaleX(0) translateX(0%);
 161       }
 162     }
 163
 164     @-webkit-keyframes indeterminate-splitter {
 165       0% {
 166         -webkit-transform: scaleX(.75) translateX(-125%);
 167       }
 168       30% {
 169         -webkit-transform: scaleX(.75) translateX(-125%);
 170         -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);
 171       }
 172       90% {
 173         -webkit-transform: scaleX(.75) translateX(125%);
 174       }
 175       100% {
 176         -webkit-transform: scaleX(.75) translateX(125%);
 177       }
 178     }
 179
 180     @keyframes indeterminate-bar {
 181       0% {
 182         transform: scaleX(1) translateX(-100%);
 183       }
 184       50% {
 185         transform: scaleX(1) translateX(0%);
 186       }
 187       75% {
 188         transform: scaleX(1) translateX(0%);
 189         animation-timing-function: cubic-bezier(.28,.62,.37,.91);
 190       }
 191       100% {
 192         transform: scaleX(0) translateX(0%);
 193       }
 194     }
 195
 196     @keyframes indeterminate-splitter {
 197       0% {
 198         transform: scaleX(.75) translateX(-125%);
 199       }
 200       30% {
 201         transform: scaleX(.75) translateX(-125%);
 202         animation-timing-function: cubic-bezier(.42,0,.6,.8);
 203       }
 204       90% {
 205         transform: scaleX(.75) translateX(125%);
 206       }
 207       100% {
 208         transform: scaleX(.75) translateX(125%);
 209       }
 210     }
 211   </style>
 212   <template>
 213     <div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}">
 214       <div id="secondaryProgress" class="fit"></div>
 215       <div id="activeProgress" class="fit"></div>
 216       <div id="indeterminateSplitter" class="fit"></div>
 217     </div>
 218   </template>
 219 </dom-module>
 220
 221 <script src="paper-progress-extracted.js"></script></body></html>