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

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

Issue 1221923003: Update bower.json for Polymer elements and add PRESUBMIT.py (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 5 years, 5 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
1 <!-- 1 <!--
2 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 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 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 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 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 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 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 10
11 <link rel="import" href="../polymer/polymer.html">
11 <link rel="import" href="../paper-styles/paper-styles.html"> 12 <link rel="import" href="../paper-styles/paper-styles.html">
12 <link rel="import" href="../iron-range-behavior/iron-range-behavior.html"> 13 <link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
13 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html"> 14 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
14 15
15 <!-- 16 <!--
16 The progress bars are for situations where the percentage completed can be 17 The progress bars are for situations where the percentage completed can be
17 determined. They give users a quick sense of how much longer an operation 18 determined. They give users a quick sense of how much longer an operation
18 will take. 19 will take.
19 20
20 Example: 21 Example:
21 22
22 <paper-progress value="10"></paper-progress> 23 <paper-progress value="10"></paper-progress>
23 24
24 There is also a secondary progress which is useful for displaying intermediate 25 There is also a secondary progress which is useful for displaying intermediate
25 progress, such as the buffer level during a streaming playback progress bar. 26 progress, such as the buffer level during a streaming playback progress bar.
26 27
27 Example: 28 Example:
28 29
29 <paper-progress value="10" secondary-progress="30"></paper-progress> 30 <paper-progress value="10" secondary-progress="30"></paper-progress>
30 31
31 Styling progress bar: 32 ### Styling progress bar:
32 33
33 To change the active progress bar color: 34 To change the active progress bar color:
34 35
35 paper-progress { 36 paper-progress {
36 --paper-progress-active-color: #e91e63; 37 --paper-progress-active-color: #e91e63;
37 } 38 }
38 39
39 To change the secondary progress bar color: 40 To change the secondary progress bar color:
40 41
41 paper-progress { 42 paper-progress {
42 --paper-progress-secondary-color: #f8bbd0; 43 --paper-progress-secondary-color: #f8bbd0;
43 } 44 }
44 45
45 To change the progress bar background color: 46 To change the progress bar background color:
46 47
47 paper-progress { 48 paper-progress {
48 --paper-progress-container-color: #64ffda; 49 --paper-progress-container-color: #64ffda;
49 } 50 }
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
51 @group Paper Elements 61 @group Paper Elements
52 @element paper-progress 62 @element paper-progress
53 @hero hero.svg 63 @hero hero.svg
54 @demo demo/index.html 64 @demo demo/index.html
55 --> 65 -->
56 66
57 <dom-module id="paper-progress"> 67 <dom-module id="paper-progress">
58 <style> 68 <style>
59 :host { 69 :host {
60 display: inline-block; 70 display: inline-block;
61 width: 200px; 71 width: 200px;
62 height: 4px; 72 height: 4px;
63 } 73 }
64 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
65 #progressContainer { 93 #progressContainer {
66 position: relative; 94 position: relative;
67 height: 100%; 95 height: 100%;
68 background-color: var(--paper-progress-container-color, --google-grey-300) ; 96 background-color: var(--paper-progress-container-color, --google-grey-300) ;
69 overflow: hidden; 97 overflow: hidden;
70 } 98 }
71 99
72 #activeProgress, 100 #activeProgress,
73 #secondaryProgress { 101 #secondaryProgress {
74 -webkit-transform-origin: left center; 102 -webkit-transform-origin: left center;
(...skipping 115 matching lines...) Expand 10 before | Expand all | Expand 10 after
190 }, 218 },
191 219
192 _secondaryProgressChanged: function() { 220 _secondaryProgressChanged: function() {
193 this.secondaryProgress = this._clampValue(this.secondaryProgress); 221 this.secondaryProgress = this._clampValue(this.secondaryProgress);
194 this._setSecondaryRatio(this._calcRatio(this.secondaryProgress) * 100); 222 this._setSecondaryRatio(this._calcRatio(this.secondaryProgress) * 100);
195 } 223 }
196 224
197 }); 225 });
198 226
199 </script> 227 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698