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 |