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 |