| OLD | NEW |
| (Empty) |
| 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 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 |