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. |
| 17 http://crbug.com/423363 |
| 18 --> |
| 19 |
| 20 <polymer-element name="indeterminate-progress" |
| 21 attributes="backgroundColor rate runnerColor runnerPortion"> |
| 22 <template> |
| 23 <style> |
| 24 :host { |
| 25 display: block; |
| 26 height: 4px; |
| 27 } |
| 28 |
| 29 paper-progress { |
| 30 display: block; |
| 31 width: 100%; |
| 32 height: 100%; |
| 33 } |
| 34 |
| 35 paper-progress::shadow #secondaryProgress { |
| 36 background-color: {{runnerColor}}; |
| 37 } |
| 38 |
| 39 paper-progress::shadow #activeProgress, |
| 40 paper-progress::shadow #progressContainer { |
| 41 background-color: {{backgroundColor}}; |
| 42 } |
| 43 </style> |
| 44 |
| 45 <paper-progress id="progress" value="{{primaryProgress}}" |
| 46 secondaryProgress="{{secondaryProgress}}"></paper-progress> |
| 47 </template> |
| 48 </polymer-element> |
OLD | NEW |