README.md
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