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;
}
```
|
e619a3b0
 Luigi Serra
Controllet cross ...
|
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
The following mixins are available for styling:
Custom property | Description | Default
--------------------------------------------|---------------------------------------------|----------
--paper-progress-container-color | Mixin applied to container | --google-grey-300
--paper-progress-transition-duration | Duration of the transition | 0.008s
--paper-progress-transition-timing-function | The timing function for the transition | ease
--paper-progress-transition-delay | delay for the transition | 0s
--paper-progress-active-color | The color of the active bar | --google-green-500
--paper-progress-secondary-color | The color of the secondary bar | --google-green-100
--paper-progress-disabled-active-color | The color of the active bar if disabled | --google-grey-500
--paper-progress-disabled-secondary-color | The color of the secondary bar if disabled | --google-grey-300
--paper-progress-height | The height of the progress bar | 4px
|
