third_party/polymer/v1_0/components-chromium/paper-progress/README.md

   1 paper-progress
   2 ===================
   3
   4 The progress bars are for situations where the percentage completed can be
   5 determined. They give users a quick sense of how much longer an operation
   6 will take.
   7
   8 Example:
   9
  10 ```html
  11 <paper-progress value="10"></paper-progress>
  12 ```
  13
  14 There is also a secondary progress which is useful for displaying intermediate
  15 progress, such as the buffer level during a streaming playback progress bar.
  16
  17 Example:
  18
  19 ```html
  20 <paper-progress value="10" secondary-progress="30"></paper-progress>
  21 ```
  22
  23 ### Styling progress bar:
  24
  25 To change the active progress bar color:
  26
  27 ```css
  28 paper-progress {
  29   --paper-progress-active-color: #e91e63;
  30 }
  31 ```
  32
  33 To change the secondary progress bar color:
  34
  35 ```css
  36 paper-progress {
  37   --paper-progress-secondary-color: #f8bbd0;
  38 }
  39 ```
  40
  41 To change the progress bar background color:
  42
  43 ```css
  44 paper-progress {
  45   --paper-progress-container-color: #64ffda;
  46 }
  47 ```
  48
  49 Add the class `transiting` to a `<paper-progress>` to animate the progress bar when
  50 the value changed. You can also customize the transition:
  51
  52 ```css
  53 paper-progress {
  54   --paper-progress-transition-duration: 0.08s;
  55   --paper-progress-transition-timing-function: ease;
  56   --paper-progress-transition-transition-delay: 0s;
  57 }
  58 ```
  59
  60 The following mixins are available for styling:
  61
  62 Custom property                             | Description                                 | Default
  63 --------------------------------------------|---------------------------------------------|----------
  64 --paper-progress-container-color            | Mixin applied to container                  | --google-grey-300
  65 --paper-progress-transition-duration        | Duration of the transition                  | 0.008s
  66 --paper-progress-transition-timing-function | The timing function for the transition      | ease
  67 --paper-progress-transition-delay           | delay for the transition                    | 0s
  68 --paper-progress-active-color               | The color of the active bar                 | --google-green-500
  69 --paper-progress-secondary-color            | The color of the secondary bar              | --google-green-100
  70 --paper-progress-disabled-active-color      | The color of the active bar if disabled     | --google-grey-500
  71 --paper-progress-disabled-secondary-color   | The color of the secondary bar if disabled  | --google-grey-300
  72 --paper-progress-height                     | The height of the progress bar              | 4px