OLD | NEW |
1 paper-progress | 1 |
2 =================== | 2 <!--- |
3 | 3 |
| 4 This README is automatically generated from the comments in these files: |
| 5 paper-progress.html |
| 6 |
| 7 Edit those files, and our readme bot will duplicate them over here! |
| 8 Edit this file, and the bot will squash your changes :) |
| 9 |
| 10 --> |
| 11 |
| 12 [](https://travis-ci.org/PolymerElements/paper-progress) |
| 13 |
| 14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-progres
s)_ |
| 15 |
| 16 |
| 17 ##<paper-progress> |
| 18 |
| 19 |
| 20 Material design: [Progress & activity](https://www.google.com/design/spec/compon
ents/progress-activity.html) |
| 21 |
4 The progress bars are for situations where the percentage completed can be | 22 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 | 23 determined. They give users a quick sense of how much longer an operation |
6 will take. | 24 will take. |
7 | 25 |
8 Example: | 26 Example: |
9 | 27 |
10 ```html | 28 <paper-progress value="10"></paper-progress> |
11 <paper-progress value="10"></paper-progress> | |
12 ``` | |
13 | 29 |
14 There is also a secondary progress which is useful for displaying intermediate | 30 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. | 31 progress, such as the buffer level during a streaming playback progress bar. |
16 | 32 |
17 Example: | 33 Example: |
18 | 34 |
19 ```html | 35 <paper-progress value="10" secondary-progress="30"></paper-progress> |
20 <paper-progress value="10" secondary-progress="30"></paper-progress> | |
21 ``` | |
22 | 36 |
23 ### Styling progress bar: | 37 ### Styling progress bar: |
24 | 38 |
25 To change the active progress bar color: | 39 To change the active progress bar color: |
26 | 40 |
27 ```css | 41 paper-progress { |
28 paper-progress { | 42 --paper-progress-active-color: #e91e63; |
29 --paper-progress-active-color: #e91e63; | 43 } |
30 } | |
31 ``` | |
32 | 44 |
33 To change the secondary progress bar color: | 45 To change the secondary progress bar color: |
34 | 46 |
35 ```css | 47 paper-progress { |
36 paper-progress { | 48 --paper-progress-secondary-color: #f8bbd0; |
37 --paper-progress-secondary-color: #f8bbd0; | 49 } |
38 } | |
39 ``` | |
40 | 50 |
41 To change the progress bar background color: | 51 To change the progress bar background color: |
42 | 52 |
43 ```css | 53 paper-progress { |
44 paper-progress { | 54 --paper-progress-container-color: #64ffda; |
45 --paper-progress-container-color: #64ffda; | 55 } |
46 } | |
47 ``` | |
48 | 56 |
49 Add the class `transiting` to a `<paper-progress>` to animate the progress bar w
hen | 57 Add the class `transiting` to a paper-progress to animate the progress bar when |
50 the value changed. You can also customize the transition: | 58 the value changed. You can also customize the transition: |
51 | 59 |
52 ```css | 60 paper-progress { |
53 paper-progress { | 61 --paper-progress-transition-duration: 0.08s; |
54 --paper-progress-transition-duration: 0.08s; | 62 --paper-progress-transition-timing-function: ease; |
55 --paper-progress-transition-timing-function: ease; | 63 --paper-progress-transition-transition-delay: 0s; |
56 --paper-progress-transition-transition-delay: 0s; | 64 } |
57 } | |
58 ``` | |
59 | 65 |
60 The following mixins are available for styling: | 66 The following mixins are available for styling: |
61 | 67 |
62 Custom property | Description
| Default | 68 Custom property | Description
| Default |
63 --------------------------------------------|-----------------------------------
----------|---------- | 69 ----------------------------------------------|---------------------------------
------------|-------------- |
64 --paper-progress-container-color | Mixin applied to container
| --google-grey-300 | 70 `--paper-progress-container-color` | Mixin applied to container
| `--google-grey-300` |
65 --paper-progress-transition-duration | Duration of the transition
| 0.008s | 71 `--paper-progress-transition-duration` | Duration of the transition
| `0.008s` |
66 --paper-progress-transition-timing-function | The timing function for the transi
tion | ease | 72 `--paper-progress-transition-timing-function` | The timing function for the tran
sition | `ease` |
67 --paper-progress-transition-delay | delay for the transition
| 0s | 73 `--paper-progress-transition-delay` | delay for the transition
| `0s` |
68 --paper-progress-active-color | The color of the active bar
| --google-green-500 | 74 `--paper-progress-active-color` | The color of the active bar
| `--google-green-500` |
69 --paper-progress-secondary-color | The color of the secondary bar
| --google-green-100 | 75 `--paper-progress-secondary-color` | The color of the secondary bar
| `--google-green-100` |
70 --paper-progress-disabled-active-color | The color of the active bar if dis
abled | --google-grey-500 | 76 `--paper-progress-disabled-active-color` | The color of the active bar if d
isabled | `--google-grey-500` |
71 --paper-progress-disabled-secondary-color | The color of the secondary bar if
disabled | --google-grey-300 | 77 `--paper-progress-disabled-secondary-color` | The color of the secondary bar i
f disabled | `--google-grey-300` |
72 --paper-progress-height | The height of the progress bar
| 4px | 78 `--paper-progress-height` | The height of the progress bar
| `4px` |
| 79 |
| 80 |
OLD | NEW |