Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(201)

Side by Side Diff: third_party/polymer/v1_0/components/paper-progress/paper-progress.html

Issue 1269803005: Remove third_party/polymer from .gitignore (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698