OLD | NEW |
---|---|
(Empty) | |
1 <link rel="import" href="polymer/polymer/polymer.html"> | |
2 <link rel="import" href="polymer/paper-progress/paper-progress.html"> | |
3 | |
4 <!-- | |
5 Progress bar for the cases when the length of the task is unknown. | |
6 Displays a cyclic animation without an indication of progress. | |
7 Published properties: | |
8 * backgroundColor | |
9 * rate - [1 - 10]. Sets the animation's rate. | |
10 * runnerColor | |
11 * runnerPortion - [1 - 100]. Portion of runner's width relative to progress | |
12 bar width (in percents). | |
13 | |
14 TODO(dzhioev): Polymer doesn't provide an indeterminate mode for | |
15 <paper-progress> for now, but it will soon. So this element should be replaced | |
16 with <paper-progress> when it'll have an indeterminate mode. | |
Nikita (slow)
2014/10/14 13:27:12
nit: Please file a tracking bug for that.
dzhioev (left Google)
2014/10/15 14:07:42
Done, http://crbug.com/423363
| |
17 | |
18 --> | |
19 <polymer-element name="indeterminate-progress" | |
20 attributes="backgroundColor rate runnerColor runnerPortion"> | |
21 <template> | |
22 <style> | |
23 :host { | |
24 display: block; | |
25 height: 4px; | |
26 } | |
27 | |
28 paper-progress { | |
29 display: block; | |
30 width: 100%; | |
31 height: 100%; | |
32 } | |
33 | |
34 paper-progress::shadow #secondaryProgress { | |
35 background-color: {{runnerColor}}; | |
36 } | |
37 | |
38 paper-progress::shadow #activeProgress, | |
39 paper-progress::shadow #progressContainer { | |
40 background-color: {{backgroundColor}}; | |
41 } | |
42 </style> | |
43 | |
44 <paper-progress id="progress" value="{{primaryProgress}}" | |
45 secondaryProgress="{{secondaryProgress}}"></paper-progress> | |
46 </template> | |
47 </polymer-element> | |
OLD | NEW |