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="../paper-styles/paper-styles-classes.html">
  12 <link rel="import" href="../iron-range-behavior/iron-range-behavior.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 Custom property                             | Description                                 | Default
  62 --------------------------------------------|---------------------------------------------|----------
  63 --paper-progress-container-color            | Mixin applied to container                  | --google-grey-300
  64 --paper-progress-transition-duration        | Duration of the transition                  | 0.008s
  65 --paper-progress-transition-timing-function | The timing function for the transition      | ease
  66 --paper-progress-transition-delay           | delay for the transition                    | 0s
  67 --paper-progress-active-color               | The color of the active bar                 | --google-green-500
  68 --paper-progress-secondary-color            | The color of the secondary bar              | --google-green-100
  69 --paper-progress-disabled-active-color      | The color of the active bar if disabled     | --google-grey-500
  70 --paper-progress-disabled-secondary-color   | The color of the secondary bar if disabled  | --google-grey-300
  71 --paper-progress-height                     | The height of the progress bar              | 4px
  72
  73 @group Paper Elements
  74 @element paper-progress
  75 @hero hero.svg
  76 @demo demo/index.html
  77 -->
  78
  79 </head><body><dom-module id="paper-progress">
  80   <style>
  81     :host {
  82       display: block;
  83       width: 200px;
  84       position: relative;
  85       overflow: hidden;
  86     }
  87
  88     #progressContainer {
  89       position: relative;
  90     }
  91
  92     #progressContainer,
  93     /* the stripe for the indeterminate animation*/
  94     .indeterminate:after {
  95       height: var(--paper-progress-height, 4px);
  96     }
  97
  98     #primaryProgress,
  99     #secondaryProgress,
 100     .indeterminate:after {
 101       @apply(--layout-fit);
 102     }
 103
 104     #progressContainer,
 105     .indeterminate:after {
 106       background-color: var(--paper-progress-container-color, --google-grey-300);
 107     }
 108
 109     :host(.transiting) #primaryProgress,
 110     :host(.transiting) #secondaryProgress {
 111       -webkit-transition-property: -webkit-transform;
 112       transition-property: transform;
 113
 114       /* Duration */
 115       -webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s);
 116       transition-duration: var(--paper-progress-transition-duration, 0.08s);
 117
 118       /* Timing function */
 119       -webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease);
 120       transition-timing-function: var(--paper-progress-transition-timing-function, ease);
 121
 122       /* Delay */
 123       -webkit-transition-delay: var(--paper-progress-transition-delay, 0s);
 124       transition-delay: var(--paper-progress-transition-delay, 0s);
 125     }
 126
 127     #primaryProgress,
 128     #secondaryProgress {
 129       @apply(--layout-fit);
 130       -webkit-transform-origin: left center;
 131       transform-origin: left center;
 132       -webkit-transform: scaleX(0);
 133       transform: scaleX(0);
 134       will-change: transform;
 135     }
 136
 137     #primaryProgress {
 138       background-color: var(--paper-progress-active-color, --google-green-500);
 139     }
 140
 141     #secondaryProgress {
 142       position: relative;
 143       background-color: var(--paper-progress-secondary-color, --google-green-100);
 144     }
 145
 146     :host([disabled]) #primaryProgress {
 147       background-color: var(--paper-progress-disabled-active-color, --google-grey-500);
 148     }
 149
 150     :host([disabled]) #secondaryProgress {
 151       background-color: var(--paper-progress-disabled-active-color, --google-grey-300);
 152     }
 153
 154     :host(:not([disabled])) #primaryProgress.indeterminate {
 155       -webkit-transform-origin: right center;
 156       transform-origin: right center;
 157       -webkit-animation: indeterminate-bar 2s linear infinite;
 158       animation: indeterminate-bar 2s linear infinite;
 159     }
 160
 161     :host(:not([disabled])) #primaryProgress.indeterminate:after {
 162       content: "";
 163       -webkit-transform-origin: center center;
 164       transform-origin: center center;
 165
 166       -webkit-animation: indeterminate-splitter 2s linear infinite;
 167       animation: indeterminate-splitter 2s linear infinite;
 168     }
 169
 170     @-webkit-keyframes indeterminate-bar {
 171       0% {
 172         -webkit-transform: scaleX(1) translateX(-100%);
 173       }
 174       50% {
 175         -webkit-transform: scaleX(1) translateX(0%);
 176       }
 177       75% {
 178         -webkit-transform: scaleX(1) translateX(0%);
 179         -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91);
 180       }
 181       100% {
 182         -webkit-transform: scaleX(0) translateX(0%);
 183       }
 184     }
 185
 186     @-webkit-keyframes indeterminate-splitter {
 187       0% {
 188         -webkit-transform: scaleX(.75) translateX(-125%);
 189       }
 190       30% {
 191         -webkit-transform: scaleX(.75) translateX(-125%);
 192         -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);
 193       }
 194       90% {
 195         -webkit-transform: scaleX(.75) translateX(125%);
 196       }
 197       100% {
 198         -webkit-transform: scaleX(.75) translateX(125%);
 199       }
 200     }
 201
 202     @keyframes indeterminate-bar {
 203       0% {
 204         transform: scaleX(1) translateX(-100%);
 205       }
 206       50% {
 207         transform: scaleX(1) translateX(0%);
 208       }
 209       75% {
 210         transform: scaleX(1) translateX(0%);
 211         animation-timing-function: cubic-bezier(.28,.62,.37,.91);
 212       }
 213       100% {
 214         transform: scaleX(0) translateX(0%);
 215       }
 216     }
 217
 218     @keyframes indeterminate-splitter {
 219       0% {
 220         transform: scaleX(.75) translateX(-125%);
 221       }
 222       30% {
 223         transform: scaleX(.75) translateX(-125%);
 224         animation-timing-function: cubic-bezier(.42,0,.6,.8);
 225       }
 226       90% {
 227         transform: scaleX(.75) translateX(125%);
 228       }
 229       100% {
 230         transform: scaleX(.75) translateX(125%);
 231       }
 232     }
 233   </style>
 234   <template>
 235     <div id="progressContainer">
 236       <div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRatio)]]"></div>
 237       <div id="primaryProgress"></div>
 238     </div>
 239   </template>
 240 </dom-module>
 241
 242 <script src="paper-progress-extracted.js"></script></body></html>