Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(6)

Side by Side Diff: third_party/polymer/v1_0/components/paper-progress/README.md

Issue 1221923003: Update bower.json for Polymer elements and add PRESUBMIT.py (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 5 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 paper-progress 1 paper-progress
2 =================== 2 ===================
3 3
4 The progress bars are for situations where the percentage completed can be 4 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 5 determined. They give users a quick sense of how much longer an operation
6 will take. 6 will take.
7 7
8 Example: 8 Example:
9 9
10 ```html 10 ```html
11 <paper-progress value="10"></paper-progress> 11 <paper-progress value="10"></paper-progress>
12 ``` 12 ```
13 13
14 There is also a secondary progress which is useful for displaying intermediate 14 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. 15 progress, such as the buffer level during a streaming playback progress bar.
16 16
17 Example: 17 Example:
18 18
19 ```html 19 ```html
20 <paper-progress value="10" secondaryProgress="30"></paper-progress> 20 <paper-progress value="10" secondary-progress="30"></paper-progress>
21 ``` 21 ```
22 22
23 Styling progress bar: 23 ### Styling progress bar:
24 24
25 To change the active progress bar color: 25 To change the active progress bar color:
26 26
27 ```css 27 ```css
28 paper-progress { 28 paper-progress {
29 --paper-progress-active-color: #e91e63; 29 --paper-progress-active-color: #e91e63;
30 } 30 }
31 ``` 31 ```
32 32
33 To change the secondary progress bar color: 33 To change the secondary progress bar color:
34 34
35 ```css 35 ```css
36 paper-progress { 36 paper-progress {
37 --paper-progress-secondary-color: #f8bbd0; 37 --paper-progress-secondary-color: #f8bbd0;
38 } 38 }
39 ``` 39 ```
40 40
41 To change the progress bar background color: 41 To change the progress bar background color:
42 42
43 ```css 43 ```css
44 paper-progress { 44 paper-progress {
45 --paper-progress-container-color: #64ffda; 45 --paper-progress-container-color: #64ffda;
46 } 46 }
47 ``` 47 ```
48
49 Add the class `transiting` to a `<paper-progress>` to animate the progress bar w hen
50 the value changed. You can also customize the transition:
51
52 ```css
53 paper-progress {
54 --paper-progress-transition-duration: 0.08s;
55 --paper-progress-transition-timing-function: ease;
56 --paper-progress-transition-transition-delay: 0s;
57 }
58 ```
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698