| OLD | NEW |
| 1 paper-progress | 1 paper-progress |
| 2 =================== | 2 =================== |
| 3 | 3 |
| 4 The progress bars are for situations where the percentage completed can be | 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 | 5 determined. They give users a quick sense of how much longer an operation |
| 6 will take. | 6 will take. |
| 7 | 7 |
| 8 Example: | 8 Example: |
| 9 | 9 |
| 10 ```html | 10 ```html |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 49 Add the class `transiting` to a `<paper-progress>` to animate the progress bar w
hen | 49 Add the class `transiting` to a `<paper-progress>` to animate the progress bar w
hen |
| 50 the value changed. You can also customize the transition: | 50 the value changed. You can also customize the transition: |
| 51 | 51 |
| 52 ```css | 52 ```css |
| 53 paper-progress { | 53 paper-progress { |
| 54 --paper-progress-transition-duration: 0.08s; | 54 --paper-progress-transition-duration: 0.08s; |
| 55 --paper-progress-transition-timing-function: ease; | 55 --paper-progress-transition-timing-function: ease; |
| 56 --paper-progress-transition-transition-delay: 0s; | 56 --paper-progress-transition-transition-delay: 0s; |
| 57 } | 57 } |
| 58 ``` | 58 ``` |
| 59 |
| 60 The following mixins are available for styling: |
| 61 |
| 62 Custom property | Description | Default |
| 63 ----------------|-------------|---------- |
| 64 `--paper-progress-container` | Mixin applied to container | `{}` |
| OLD | NEW |