chrome/browser/resources/chromeos/login/indeterminate-progress.html

   1 <link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
   2 <link rel="import" href="chrome://resources/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>