Pin Chrome's shortcut to the Win10 Start menu on install and OS upgrade.
[chromium-blink-merge.git] / third_party / polymer / v1_0 / components-chromium / paper-progress / paper-progress.html
blob6076a648f46cfb98492978ff1f3f803cb1990d2a
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 http://polymer.github.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9 --><html><head><link rel="import" href="../polymer/polymer.html">
10 <link rel="import" href="../paper-styles/paper-styles.html">
11 <link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
12 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
14 <!--
15 The progress bars are for situations where the percentage completed can be
16 determined. They give users a quick sense of how much longer an operation
17 will take.
19 Example:
21 <paper-progress value="10"></paper-progress>
23 There is also a secondary progress which is useful for displaying intermediate
24 progress, such as the buffer level during a streaming playback progress bar.
26 Example:
28 <paper-progress value="10" secondary-progress="30"></paper-progress>
30 ### Styling progress bar:
32 To change the active progress bar color:
34 paper-progress {
35 --paper-progress-active-color: #e91e63;
38 To change the secondary progress bar color:
40 paper-progress {
41 --paper-progress-secondary-color: #f8bbd0;
44 To change the progress bar background color:
46 paper-progress {
47 --paper-progress-container-color: #64ffda;
50 Add the class `transiting` to a paper-progress to animate the progress bar when
51 the value changed. You can also customize the transition:
53 paper-progress {
54 --paper-progress-transition-duration: 0.08s;
55 --paper-progress-transition-timing-function: ease;
56 --paper-progress-transition-transition-delay: 0s;
59 @group Paper Elements
60 @element paper-progress
61 @hero hero.svg
62 @demo demo/index.html
63 -->
65 </head><body><dom-module id="paper-progress">
66 <style>
67 :host {
68 display: inline-block;
69 width: 200px;
70 height: 4px;
73 :host(.transiting) #activeProgress,
74 :host(.transiting) #secondaryProgress {
75 -webkit-transition-property: -webkit-transform;
76 transition-property: transform;
78 /* Duration */
79 -webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s);
80 transition-duration: var(--paper-progress-transition-duration, 0.08s);
82 /* Timing function */
83 -webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease);
84 transition-timing-function: var(--paper-progress-transition-timing-function, ease);
86 /* Delay */
87 -webkit-transition-delay: var(--paper-progress-transition-delay, 0s);
88 transition-delay: var(--paper-progress-transition-delay, 0s);
91 #progressContainer {
92 position: relative;
93 height: 100%;
94 background-color: var(--paper-progress-container-color, --google-grey-300);
95 overflow: hidden;
98 #activeProgress,
99 #secondaryProgress {
100 -webkit-transform-origin: left center;
101 transform-origin: left center;
102 -webkit-transform: scaleX(0);
103 transform: scaleX(0);
106 #activeProgress {
107 background-color: var(--paper-progress-active-color, --google-green-500);
110 #secondaryProgress {
111 background-color: var(--paper-progress-secondary-color, --google-green-100);
114 #activeProgress.indeterminate {
115 -webkit-transform-origin: center center;
116 transform-origin: center center;
117 -webkit-animation: indeterminate-bar 1s linear infinite;
118 animation: indeterminate-bar 1s linear infinite;
121 @-webkit-keyframes indeterminate-bar {
122 0% {
123 -webkit-transform: translate(-50%) scaleX(0);
125 50% {
126 -webkit-transform: translate(0%) scaleX(0.3);
128 100% {
129 -webkit-transform: translate(50%) scaleX(0);
133 @keyframes indeterminate-bar {
134 0% {
135 transform: translate(-50%) scaleX(0);
137 50% {
138 transform: translate(0%) scaleX(0.3);
140 100% {
141 transform: translate(50%) scaleX(0);
144 </style>
145 <template>
146 <div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}">
147 <div id="secondaryProgress" class="fit"></div>
148 <div id="activeProgress" class="fit"></div>
149 </div>
150 </template>
151 </dom-module>
153 <script src="paper-progress-extracted.js"></script></body></html>