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

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

Issue 1561893002: [Polymer] Roll polymer to latest version (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: update grdp Created 4 years, 11 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
2 =================== 2 <!---
3 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 ##&lt;paper-progress&gt;
18
19
20 Material design: [Progress & activity](https://www.google.com/design/spec/compon ents/progress-activity.html)
21
4 The progress bars are for situations where the percentage completed can be 22 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 23 determined. They give users a quick sense of how much longer an operation
6 will take. 24 will take.
7 25
8 Example: 26 Example:
9 27
10 ```html 28 <paper-progress value="10"></paper-progress>
11 <paper-progress value="10"></paper-progress>
12 ```
13 29
14 There is also a secondary progress which is useful for displaying intermediate 30 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. 31 progress, such as the buffer level during a streaming playback progress bar.
16 32
17 Example: 33 Example:
18 34
19 ```html 35 <paper-progress value="10" secondary-progress="30"></paper-progress>
20 <paper-progress value="10" secondary-progress="30"></paper-progress>
21 ```
22 36
23 ### Styling progress bar: 37 ### Styling progress bar:
24 38
25 To change the active progress bar color: 39 To change the active progress bar color:
26 40
27 ```css 41 paper-progress {
28 paper-progress { 42 --paper-progress-active-color: #e91e63;
29 --paper-progress-active-color: #e91e63; 43 }
30 }
31 ```
32 44
33 To change the secondary progress bar color: 45 To change the secondary progress bar color:
34 46
35 ```css 47 paper-progress {
36 paper-progress { 48 --paper-progress-secondary-color: #f8bbd0;
37 --paper-progress-secondary-color: #f8bbd0; 49 }
38 }
39 ```
40 50
41 To change the progress bar background color: 51 To change the progress bar background color:
42 52
43 ```css 53 paper-progress {
44 paper-progress { 54 --paper-progress-container-color: #64ffda;
45 --paper-progress-container-color: #64ffda; 55 }
46 }
47 ```
48 56
49 Add the class `transiting` to a `<paper-progress>` to animate the progress bar w hen 57 Add the class `transiting` to a paper-progress to animate the progress bar when
50 the value changed. You can also customize the transition: 58 the value changed. You can also customize the transition:
51 59
52 ```css 60 paper-progress {
53 paper-progress { 61 --paper-progress-transition-duration: 0.08s;
54 --paper-progress-transition-duration: 0.08s; 62 --paper-progress-transition-timing-function: ease;
55 --paper-progress-transition-timing-function: ease; 63 --paper-progress-transition-transition-delay: 0s;
56 --paper-progress-transition-transition-delay: 0s; 64 }
57 }
58 ```
59 65
60 The following mixins are available for styling: 66 The following mixins are available for styling:
61 67
62 Custom property | Description | Default 68 Custom property | Description | Default
63 --------------------------------------------|----------------------------------- ----------|---------- 69 ----------------------------------------------|--------------------------------- ------------|--------------
64 --paper-progress-container-color | Mixin applied to container | --google-grey-300 70 `--paper-progress-container-color` | Mixin applied to container | `--google-grey-300`
65 --paper-progress-transition-duration | Duration of the transition | 0.008s 71 `--paper-progress-transition-duration` | Duration of the transition | `0.008s`
66 --paper-progress-transition-timing-function | The timing function for the transi tion | ease 72 `--paper-progress-transition-timing-function` | The timing function for the tran sition | `ease`
67 --paper-progress-transition-delay | delay for the transition | 0s 73 `--paper-progress-transition-delay` | delay for the transition | `0s`
68 --paper-progress-active-color | The color of the active bar | --google-green-500 74 `--paper-progress-active-color` | The color of the active bar | `--google-green-500`
69 --paper-progress-secondary-color | The color of the secondary bar | --google-green-100 75 `--paper-progress-secondary-color` | The color of the secondary bar | `--google-green-100`
70 --paper-progress-disabled-active-color | The color of the active bar if dis abled | --google-grey-500 76 `--paper-progress-disabled-active-color` | The color of the active bar if d isabled | `--google-grey-500`
71 --paper-progress-disabled-secondary-color | The color of the secondary bar if disabled | --google-grey-300 77 `--paper-progress-disabled-secondary-color` | The color of the secondary bar i f disabled | `--google-grey-300`
72 --paper-progress-height | The height of the progress bar | 4px 78 `--paper-progress-height` | The height of the progress bar | `4px`
79
80
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698