OLD | NEW |
(Empty) | |
| 1 |
| 2 <!--- |
| 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 [![Build Status](https://travis-ci.org/PolymerElements/paper-progress.svg?branch
=master)](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 |
| 22 The progress bars are for situations where the percentage completed can be |
| 23 determined. They give users a quick sense of how much longer an operation |
| 24 will take. |
| 25 |
| 26 Example: |
| 27 |
| 28 <paper-progress value="10"></paper-progress> |
| 29 |
| 30 There is also a secondary progress which is useful for displaying intermediate |
| 31 progress, such as the buffer level during a streaming playback progress bar. |
| 32 |
| 33 Example: |
| 34 |
| 35 <paper-progress value="10" secondary-progress="30"></paper-progress> |
| 36 |
| 37 ### Styling progress bar: |
| 38 |
| 39 To change the active progress bar color: |
| 40 |
| 41 paper-progress { |
| 42 --paper-progress-active-color: #e91e63; |
| 43 } |
| 44 |
| 45 To change the secondary progress bar color: |
| 46 |
| 47 paper-progress { |
| 48 --paper-progress-secondary-color: #f8bbd0; |
| 49 } |
| 50 |
| 51 To change the progress bar background color: |
| 52 |
| 53 paper-progress { |
| 54 --paper-progress-container-color: #64ffda; |
| 55 } |
| 56 |
| 57 Add the class `transiting` to a paper-progress to animate the progress bar when |
| 58 the value changed. You can also customize the transition: |
| 59 |
| 60 paper-progress { |
| 61 --paper-progress-transition-duration: 0.08s; |
| 62 --paper-progress-transition-timing-function: ease; |
| 63 --paper-progress-transition-transition-delay: 0s; |
| 64 } |
| 65 |
| 66 The following mixins are available for styling: |
| 67 |
| 68 Custom property | Description
| Default |
| 69 ----------------------------------------------|---------------------------------
------------|-------------- |
| 70 `--paper-progress-container-color` | Mixin applied to container
| `--google-grey-300` |
| 71 `--paper-progress-transition-duration` | Duration of the transition
| `0.008s` |
| 72 `--paper-progress-transition-timing-function` | The timing function for the tran
sition | `ease` |
| 73 `--paper-progress-transition-delay` | delay for the transition
| `0s` |
| 74 `--paper-progress-active-color` | The color of the active bar
| `--google-green-500` |
| 75 `--paper-progress-secondary-color` | The color of the secondary bar
| `--google-green-100` |
| 76 `--paper-progress-disabled-active-color` | The color of the active bar if d
isabled | `--google-grey-500` |
| 77 `--paper-progress-disabled-secondary-color` | The color of the secondary bar i
f disabled | `--google-grey-300` |
| 78 `--paper-progress-height` | The height of the progress bar
| `4px` |
| 79 |
| 80 |
OLD | NEW |