| 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 |