Blame view

bower_components/paper-progress/README.md 2.36 KB
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