1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 | :host {
|
14 | display: block;
|
15 | height: 5px;
|
16 | overflow: hidden;
|
17 | position: relative;
|
18 | transform: translateZ(0);
|
19 | transition: opacity 250ms linear;
|
20 | width: 100%;
|
21 | |
22 |
|
23 |
|
24 |
|
25 | |
26 |
|
27 |
|
28 | |
29 |
|
30 |
|
31 | |
32 |
|
33 | }
|
34 | :host .md-progress-bar-background {
|
35 | background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27#b2dfdb%27%2F%3E%3C%2Fsvg%3E");
|
36 | background-repeat: repeat-x;
|
37 | background-size: 10px 4px;
|
38 | height: 100%;
|
39 | position: absolute;
|
40 | visibility: hidden;
|
41 | width: 100%; }
|
42 | :host .md-progress-bar-buffer {
|
43 | background-color: #b2dfdb;
|
44 | height: 100%;
|
45 | position: absolute;
|
46 | transform-origin: top left;
|
47 | transition: transform 250ms ease;
|
48 | width: 100%; }
|
49 | :host .md-progress-bar-secondary {
|
50 | visibility: hidden; }
|
51 | :host .md-progress-bar-fill {
|
52 | animation: none;
|
53 | height: 100%;
|
54 | position: absolute;
|
55 | transform-origin: top left;
|
56 | transition: transform 250ms ease;
|
57 | width: 100%; }
|
58 | :host .md-progress-bar-fill::after {
|
59 | animation: none;
|
60 | background-color: #00897b;
|
61 | content: '';
|
62 | display: inline-block;
|
63 | height: 100%;
|
64 | position: absolute;
|
65 | width: 100%; }
|
66 | :host[color='accent'] .md-progress-bar-background {
|
67 | background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27#e1bee7%27%2F%3E%3C%2Fsvg%3E");
|
68 | background-repeat: repeat-x;
|
69 | background-size: 10px 4px; }
|
70 | :host[color='accent'] .md-progress-bar-buffer {
|
71 | background-color: #e1bee7; }
|
72 | :host[color='accent'] .md-progress-bar-fill::after {
|
73 | background-color: #8e24aa; }
|
74 | :host[color='warn'] .md-progress-bar-background {
|
75 | background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27#ffcdd2%27%2F%3E%3C%2Fsvg%3E");
|
76 | background-repeat: repeat-x;
|
77 | background-size: 10px 4px; }
|
78 | :host[color='warn'] .md-progress-bar-buffer {
|
79 | background-color: #ffcdd2; }
|
80 | :host[color='warn'] .md-progress-bar-fill::after {
|
81 | background-color: #e53935; }
|
82 | :host[mode='query'] {
|
83 | transform: rotateZ(180deg); }
|
84 | :host[mode='indeterminate'] .md-progress-bar-fill, :host[mode='query'] .md-progress-bar-fill {
|
85 | transition: none; }
|
86 | :host[mode='indeterminate'] .md-progress-bar-primary, :host[mode='query'] .md-progress-bar-primary {
|
87 | animation: md-progress-bar-primary-indeterminate-translate 2000ms infinite linear;
|
88 | left: -145.166611%; }
|
89 | :host[mode='indeterminate'] .md-progress-bar-primary.md-progress-bar-fill::after, :host[mode='query'] .md-progress-bar-primary.md-progress-bar-fill::after {
|
90 | animation: md-progress-bar-primary-indeterminate-scale 2000ms infinite linear; }
|
91 | :host[mode='indeterminate'] .md-progress-bar-secondary, :host[mode='query'] .md-progress-bar-secondary {
|
92 | animation: md-progress-bar-secondary-indeterminate-translate 2000ms infinite linear;
|
93 | left: -54.888891%;
|
94 | visibility: visible; }
|
95 | :host[mode='indeterminate'] .md-progress-bar-secondary.md-progress-bar-fill::after, :host[mode='query'] .md-progress-bar-secondary.md-progress-bar-fill::after {
|
96 | animation: md-progress-bar-secondary-indeterminate-scale 2000ms infinite linear; }
|
97 | :host[mode='buffer'] .md-progress-bar-background {
|
98 | animation: md-progress-bar-background-scroll 250ms infinite linear;
|
99 | visibility: visible; }
|
100 |
|
101 | :host-context([dir='rtl']) {
|
102 | transform: rotateY(180deg); }
|
103 |
|
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 | @keyframes md-progress-bar-primary-indeterminate-translate {
|
126 | 0% {
|
127 | transform: translateX(0); }
|
128 | 20% {
|
129 | animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582);
|
130 | transform: translateX(0); }
|
131 | 59.15% {
|
132 | animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635);
|
133 | transform: translateX(83.67142%); }
|
134 | 100% {
|
135 | transform: translateX(200.61106%); } }
|
136 |
|
137 | @keyframes md-progress-bar-primary-indeterminate-scale {
|
138 | 0% {
|
139 | transform: scaleX(0.08); }
|
140 | 36.65% {
|
141 | animation-timing-function: cubic-bezier(0.33473, 0.12482, 0.78584, 1);
|
142 | transform: scaleX(0.08); }
|
143 | 69.15% {
|
144 | animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
|
145 | transform: scaleX(0.66148); }
|
146 | 100% {
|
147 | transform: scaleX(0.08); } }
|
148 |
|
149 | @keyframes md-progress-bar-secondary-indeterminate-translate {
|
150 | 0% {
|
151 | animation-timing-function: cubic-bezier(0.15, 0, 0.51506, 0.40969);
|
152 | transform: translateX(0); }
|
153 | 25% {
|
154 | animation-timing-function: cubic-bezier(0.31033, 0.28406, 0.8, 0.73371);
|
155 | transform: translateX(37.65191%); }
|
156 | 48.35% {
|
157 | animation-timing-function: cubic-bezier(0.4, 0.62704, 0.6, 0.90203);
|
158 | transform: translateX(84.38617%); }
|
159 | 100% {
|
160 | transform: translateX(160.27778%); } }
|
161 |
|
162 | @keyframes md-progress-bar-secondary-indeterminate-scale {
|
163 | 0% {
|
164 | animation-timing-function: cubic-bezier(0.15, 0, 0.51506, 0.40969);
|
165 | transform: scaleX(0.08); }
|
166 | 19.15% {
|
167 | animation-timing-function: cubic-bezier(0.31033, 0.28406, 0.8, 0.73371);
|
168 | transform: scaleX(0.4571); }
|
169 | 44.15% {
|
170 | animation-timing-function: cubic-bezier(0.4, 0.62704, 0.6, 0.90203);
|
171 | transform: scaleX(0.72796); }
|
172 | 100% {
|
173 | transform: scaleX(0.08); } }
|
174 |
|
175 |
|
176 | @keyframes md-progress-bar-background-scroll {
|
177 | to {
|
178 | transform: translateX(-10px); } }
|
179 |
|
180 |
|