73bcce88
 luigser
COMPONENTS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
paper-progress
===================
The progress bars are for situations where the percentage completed can be
determined. They give users a quick sense of how much longer an operation
will take.
Example:
```html
<paper-progress value="10"></paper-progress>
```
There is also a secondary progress which is useful for displaying intermediate
progress, such as the buffer level during a streaming playback progress bar.
Example:
```html
<paper-progress value="10" secondary-progress="30"></paper-progress>
```
### Styling progress bar:
To change the active progress bar color:
```css
paper-progress {
--paper-progress-active-color: #e91e63;
}
```
To change the secondary progress bar color:
```css
paper-progress {
--paper-progress-secondary-color: #f8bbd0;
}
```
To change the progress bar background color:
```css
paper-progress {
--paper-progress-container-color: #64ffda;
}
```
Add the class `transiting` to a `<paper-progress>` to animate the progress bar when
the value changed. You can also customize the transition:
```css
paper-progress {
--paper-progress-transition-duration: 0.08s;
--paper-progress-transition-timing-function: ease;
--paper-progress-transition-transition-delay: 0s;
}
```
|
