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">
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
21 <paper-progress value="10"></paper-progress>
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.
28 <paper-progress value="10" secondary-progress="30"></paper-progress>
30 ### Styling progress bar:
32 To change the active progress bar color:
35 --paper-progress-active-color: #e91e63;
38 To change the secondary progress bar color:
41 --paper-progress-secondary-color: #f8bbd0;
44 To change the progress bar background color:
47 --paper-progress-container-color: #64ffda;
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:
54 --paper-progress-transition-duration: 0.08s;
55 --paper-progress-transition-timing-function: ease;
56 --paper-progress-transition-transition-delay: 0s;
60 @element paper-progress
65 </head><body><dom-module id=
"paper-progress">
68 display: inline-block;
73 :host(.transiting) #activeProgress,
74 :host(.transiting) #secondaryProgress {
75 -webkit-transition-property: -webkit-transform;
76 transition-property: transform;
79 -webkit-transition-duration: var(--paper-progress-transition-duration,
0.08s);
80 transition-duration: var(--paper-progress-transition-duration,
0.08s);
83 -webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease);
84 transition-timing-function: var(--paper-progress-transition-timing-function, ease);
87 -webkit-transition-delay: var(--paper-progress-transition-delay,
0s);
88 transition-delay: var(--paper-progress-transition-delay,
0s);
94 background-color: var(--paper-progress-container-color, --google-grey-
300);
100 -webkit-transform-origin: left center;
101 transform-origin: left center;
102 -webkit-transform: scaleX(
0);
103 transform: scaleX(
0);
107 background-color: var(--paper-progress-active-color, --google-green-
500);
111 background-color: var(--paper-progress-secondary-color, --google-green-
100);
114 #activeProgress.indeterminate {
115 -webkit-transform-origin: center center;
116 transform-origin: center center;
117 -webkit-animation: indeterminate-bar
1s linear infinite;
118 animation: indeterminate-bar
1s linear infinite;
121 @-webkit-keyframes indeterminate-bar {
123 -webkit-transform: translate(-
50%) scaleX(
0);
126 -webkit-transform: translate(
0%) scaleX(
0.3);
129 -webkit-transform: translate(
50%) scaleX(
0);
133 @keyframes indeterminate-bar {
135 transform: translate(-
50%) scaleX(
0);
138 transform: translate(
0%) scaleX(
0.3);
141 transform: translate(
50%) scaleX(
0);
146 <div id=
"progressContainer" role=
"progressbar" aria-valuenow$=
"{{value}}" aria-valuemin$=
"{{min}}" aria-valuemax$=
"{{max}}">
147 <div id=
"secondaryProgress" class=
"fit"></div>
148 <div id=
"activeProgress" class=
"fit"></div>
153 <script src=
"paper-progress-extracted.js"></script></body></html>