| 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 |
| 11 <paper-progress value="10"></paper-progress> | 11 <paper-progress value="10"></paper-progress> |
| 12 ``` | 12 ``` |
| 13 | 13 |
| 14 There is also a secondary progress which is useful for displaying intermediate | 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. | 15 progress, such as the buffer level during a streaming playback progress bar. |
| 16 | 16 |
| 17 Example: | 17 Example: |
| 18 | 18 |
| 19 ```html | 19 ```html |
| 20 <paper-progress value="10" secondaryProgress="30"></paper-progress> | 20 <paper-progress value="10" secondary-progress="30"></paper-progress> |
| 21 ``` | 21 ``` |
| 22 | 22 |
| 23 Styling progress bar: | 23 ### Styling progress bar: |
| 24 | 24 |
| 25 To change the active progress bar color: | 25 To change the active progress bar color: |
| 26 | 26 |
| 27 ```css | 27 ```css |
| 28 paper-progress { | 28 paper-progress { |
| 29 --paper-progress-active-color: #e91e63; | 29 --paper-progress-active-color: #e91e63; |
| 30 } | 30 } |
| 31 ``` | 31 ``` |
| 32 | 32 |
| 33 To change the secondary progress bar color: | 33 To change the secondary progress bar color: |
| 34 | 34 |
| 35 ```css | 35 ```css |
| 36 paper-progress { | 36 paper-progress { |
| 37 --paper-progress-secondary-color: #f8bbd0; | 37 --paper-progress-secondary-color: #f8bbd0; |
| 38 } | 38 } |
| 39 ``` | 39 ``` |
| 40 | 40 |
| 41 To change the progress bar background color: | 41 To change the progress bar background color: |
| 42 | 42 |
| 43 ```css | 43 ```css |
| 44 paper-progress { | 44 paper-progress { |
| 45 --paper-progress-container-color: #64ffda; | 45 --paper-progress-container-color: #64ffda; |
| 46 } | 46 } |
| 47 ``` | 47 ``` |
| 48 |
| 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: |
| 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 ``` |
| OLD | NEW |