Chromium Code Reviews| Index: chrome/browser/resources/chromeos/login/indeterminate-progress.html |
| diff --git a/chrome/browser/resources/chromeos/login/indeterminate-progress.html b/chrome/browser/resources/chromeos/login/indeterminate-progress.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..7520b6f2def81f3eef133580e4b2d271b1728387 |
| --- /dev/null |
| +++ b/chrome/browser/resources/chromeos/login/indeterminate-progress.html |
| @@ -0,0 +1,47 @@ |
| +<link rel="import" href="polymer/polymer/polymer.html"> |
| +<link rel="import" href="polymer/paper-progress/paper-progress.html"> |
| + |
| +<!-- |
| +Progress bar for the cases when the length of the task is unknown. |
| +Displays a cyclic animation without an indication of progress. |
| +Published properties: |
| + * backgroundColor |
| + * rate - [1 - 10]. Sets the animation's rate. |
| + * runnerColor |
| + * runnerPortion - [1 - 100]. Portion of runner's width relative to progress |
| + bar width (in percents). |
| + |
| +TODO(dzhioev): Polymer doesn't provide an indeterminate mode for |
| +<paper-progress> for now, but it will soon. So this element should be replaced |
| +with <paper-progress> when it'll have an indeterminate mode. |
| + |
| +--> |
| +<polymer-element name="indeterminate-progress" |
| + attributes="backgroundColor rate runnerColor runnerPortion"> |
| + <template> |
| + <style> |
| + :host { |
|
dzhioev (left Google)
2014/10/10 13:53:01
About :host, :shadow and /deep/ you can read here
|
| + display: block; |
| + height: 4px; |
| + } |
| + |
| + paper-progress { |
| + display: block; |
| + width: 100%; |
| + height: 100%; |
| + } |
| + |
| + paper-progress::shadow #secondaryProgress { |
| + background-color: {{runnerColor}}; |
| + } |
| + |
| + paper-progress::shadow #activeProgress, |
| + paper-progress::shadow #progressContainer { |
| + background-color: {{backgroundColor}}; |
| + } |
| + </style> |
| + |
| + <paper-progress id="progress" value="{{primaryProgress}}" |
| + secondaryProgress="{{secondaryProgress}}"></paper-progress> |
| + </template> |
| +</polymer-element> |