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 ```