104 |
105 |
135 |
136 |
137 |
138 |
--------------------------------------------------------------------------------
/test/basic.html:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
13 |
14 | paper-progress test
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
164 |
165 |
166 |
167 |
--------------------------------------------------------------------------------
/paper-progress.js:
--------------------------------------------------------------------------------
1 | /**
2 | @license
3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 | This code may only be used under the BSD style license found at
5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
8 | part of the polymer project is also subject to an additional IP rights grant
9 | found at http://polymer.github.io/PATENTS.txt
10 | */
11 | import '@polymer/polymer/polymer-legacy.js';
12 | import '@polymer/iron-flex-layout/iron-flex-layout.js';
13 | import '@polymer/paper-styles/color.js';
14 |
15 | import {IronRangeBehavior} from '@polymer/iron-range-behavior/iron-range-behavior.js';
16 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
17 | import {html} from '@polymer/polymer/lib/utils/html-tag.js';
18 |
19 | /**
20 | Material design: [Progress &
21 | activity](https://www.google.com/design/spec/components/progress-activity.html)
22 |
23 | The progress bars are for situations where the percentage completed can be
24 | determined. They give users a quick sense of how much longer an operation
25 | will take.
26 |
27 | Example:
28 |
29 |
30 |
31 | There is also a secondary progress which is useful for displaying intermediate
32 | progress, such as the buffer level during a streaming playback progress bar.
33 |
34 | Example:
35 |
36 |
37 |
38 | ### Styling progress bar:
39 |
40 | To change the active progress bar color:
41 |
42 | paper-progress {
43 | --paper-progress-active-color: #e91e63;
44 | }
45 |
46 | To change the secondary progress bar color:
47 |
48 | paper-progress {
49 | --paper-progress-secondary-color: #f8bbd0;
50 | }
51 |
52 | To change the progress bar background color:
53 |
54 | paper-progress {
55 | --paper-progress-container-color: #64ffda;
56 | }
57 |
58 | Add the class `transiting` to a paper-progress to animate the progress bar when
59 | the value changed. You can also customize the transition:
60 |
61 | paper-progress {
62 | --paper-progress-transition-duration: 0.08s;
63 | --paper-progress-transition-timing-function: ease;
64 | --paper-progress-transition-delay: 0s;
65 | }
66 |
67 | To change the duration of the indeterminate cycle:
68 |
69 | paper-progress {
70 | --paper-progress-indeterminate-cycle-duration: 2s;
71 | }
72 |
73 | The following mixins are available for styling:
74 |
75 | Custom property | Description | Default
76 | ----------------|-------------|---------
77 | `--paper-progress-container` | Mixin applied to container | `{}`
78 | `--paper-progress-transition-duration` | Duration of the transition | `0.08s`
79 | `--paper-progress-transition-timing-function` | The timing function for the transition | `ease`
80 | `--paper-progress-transition-delay` | delay for the transition | `0s`
81 | `--paper-progress-container-color` | Color of the container | `--google-grey-300`
82 | `--paper-progress-active-color` | The color of the active bar | `--google-green-500`
83 | `--paper-progress-secondary-color` | The color of the secondary bar | `--google-green-100`
84 | `--paper-progress-disabled-active-color` | The color of the active bar if disabled | `--google-grey-500`
85 | `--paper-progress-disabled-secondary-color` | The color of the secondary bar if disabled | `--google-grey-300`
86 | `--paper-progress-height` | The height of the progress bar | `4px`
87 | `--paper-progress-indeterminate-cycle-duration` | Duration of an indeterminate cycle | `2s`
88 |
89 | @group Paper Elements
90 | @element paper-progress
91 | @demo demo/index.html
92 | */
93 | Polymer({
94 | /** @override */
95 | _template: html`
96 |
254 |
255 |