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 The bot does some handling of markdown. Please file a bug if it does the wrong 11 thing! https://github.com/PolymerLabs/tedium/issues 12 13 --> 14 15 [![Build status](https://travis-ci.org/PolymerElements/paper-progress.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-progress) 16 17 _[Demo and API docs](https://elements.polymer-project.org/elements/paper-progress)_ 18 19 20 ##<paper-progress> 21 22 Material design: [Progress & activity](https://www.google.com/design/spec/components/progress-activity.html) 23 24 The progress bars are for situations where the percentage completed can be 25 determined. They give users a quick sense of how much longer an operation 26 will take. 27 28 Example: 29 30 ```html 31 <paper-progress value="10"></paper-progress> 32 ``` 33 34 There is also a secondary progress which is useful for displaying intermediate 35 progress, such as the buffer level during a streaming playback progress bar. 36 37 Example: 38 39 ```html 40 <paper-progress value="10" secondary-progress="30"></paper-progress> 41 ``` 42 43 ### Styling progress bar: 44 45 To change the active progress bar color: 46 47 ```css 48 paper-progress { 49 --paper-progress-active-color: #e91e63; 50 } 51 ``` 52 53 To change the secondary progress bar color: 54 55 ```css 56 paper-progress { 57 --paper-progress-secondary-color: #f8bbd0; 58 } 59 ``` 60 61 To change the progress bar background color: 62 63 ```css 64 paper-progress { 65 --paper-progress-container-color: #64ffda; 66 } 67 ``` 68 69 Add the class `transiting` to a paper-progress to animate the progress bar when 70 the value changed. You can also customize the transition: 71 72 ```css 73 paper-progress { 74 --paper-progress-transition-duration: 0.08s; 75 --paper-progress-transition-timing-function: ease; 76 --paper-progress-transition-transition-delay: 0s; 77 } 78 ``` 79 80 The following mixins are available for styling: 81 82 | Custom property | Description | Default | 83 | --- | --- | --- | 84 | `--paper-progress-container-color` | Mixin applied to container | `--google-grey-300` | 85 | `--paper-progress-transition-duration` | Duration of the transition | `0.008s` | 86 | `--paper-progress-transition-timing-function` | The timing function for the transition | `ease` | 87 | `--paper-progress-transition-delay` | delay for the transition | `0s` | 88 | `--paper-progress-active-color` | The color of the active bar | `--google-green-500` | 89 | `--paper-progress-secondary-color` | The color of the secondary bar | `--google-green-100` | 90 | `--paper-progress-disabled-active-color` | The color of the active bar if disabled | `--google-grey-500` | 91 | `--paper-progress-disabled-secondary-color` | The color of the secondary bar if disabled | `--google-grey-300` | 92 | `--paper-progress-height` | The height of the progress bar | `4px` | 93 94 95