c5169e0e
Renato De Donato
a new hope
|
1
2
|
paper-progress
===================
|
73bcce88
luigser
COMPONENTS
|
3
4
5
6
7
8
9
|
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:
|
c5169e0e
Renato De Donato
a new hope
|
10
11
12
|
```html
<paper-progress value="10"></paper-progress>
```
|
73bcce88
luigser
COMPONENTS
|
13
14
15
16
17
18
|
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:
|
c5169e0e
Renato De Donato
a new hope
|
19
20
21
|
```html
<paper-progress value="10" secondary-progress="30"></paper-progress>
```
|
73bcce88
luigser
COMPONENTS
|
22
23
24
25
26
|
### Styling progress bar:
To change the active progress bar color:
|
c5169e0e
Renato De Donato
a new hope
|
27
28
29
30
31
|
```css
paper-progress {
--paper-progress-active-color: #e91e63;
}
```
|
73bcce88
luigser
COMPONENTS
|
32
33
34
|
To change the secondary progress bar color:
|
c5169e0e
Renato De Donato
a new hope
|
35
36
37
38
39
|
```css
paper-progress {
--paper-progress-secondary-color: #f8bbd0;
}
```
|
73bcce88
luigser
COMPONENTS
|
40
41
42
|
To change the progress bar background color:
|
c5169e0e
Renato De Donato
a new hope
|
43
44
45
46
47
|
```css
paper-progress {
--paper-progress-container-color: #64ffda;
}
```
|
73bcce88
luigser
COMPONENTS
|
48
|
|
c5169e0e
Renato De Donato
a new hope
|
49
|
Add the class `transiting` to a `<paper-progress>` to animate the progress bar when
|
73bcce88
luigser
COMPONENTS
|
50
51
|
the value changed. You can also customize the transition:
|
c5169e0e
Renato De Donato
a new hope
|
52
53
54
55
56
57
58
|
```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
|
The following mixins are available for styling:
|
c5169e0e
Renato De Donato
a new hope
|
62
63
64
65
66
67
68
69
70
71
72
|
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
|