liquid_feedback_frontend
view style/mdl/spinner/_spinner.scss @ 1676:8fde003bdeb0
Added support for alternative DN string
| author | bsw |
|---|---|
| date | Mon Jun 07 20:58:31 2021 +0200 (2021-06-07) |
| parents | 32cc544d5a5b |
| children |
line source
1 /**
2 * Copyright 2015 Google Inc. All Rights Reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
17 @import "../variables";
20 .mdl-spinner {
21 display: inline-block;
22 position: relative;
23 width: $spinner-size;
24 height: $spinner-size;
26 &:not(.is-upgraded).is-active:after {
27 content: "Loading...";
28 }
30 &.is-upgraded.is-active {
31 animation: mdl-spinner__container-rotate $spinner-duration linear infinite;
32 }
33 }
35 @keyframes mdl-spinner__container-rotate {
36 to { transform: rotate(360deg) }
37 }
39 .mdl-spinner__layer {
40 position: absolute;
41 width: 100%;
42 height: 100%;
43 opacity: 0;
44 }
46 .mdl-spinner__layer-1 {
47 border-color: $spinner-color-1;
49 .mdl-spinner--single-color & {
50 border-color: $spinner-single-color;
51 }
53 .mdl-spinner.is-active & {
54 animation:
55 mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
56 $animation-curve-fast-out-slow-in infinite both,
57 mdl-spinner__layer-1-fade-in-out (4 * $spinner-arc-time)
58 $animation-curve-fast-out-slow-in infinite both;
59 }
60 }
62 .mdl-spinner__layer-2 {
63 border-color: $spinner-color-2;
65 .mdl-spinner--single-color & {
66 border-color: $spinner-single-color;
67 }
69 .mdl-spinner.is-active & {
70 animation:
71 mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
72 $animation-curve-fast-out-slow-in infinite both,
73 mdl-spinner__layer-2-fade-in-out (4 * $spinner-arc-time)
74 $animation-curve-fast-out-slow-in infinite both;
75 }
76 }
78 .mdl-spinner__layer-3 {
79 border-color: $spinner-color-3;
81 .mdl-spinner--single-color & {
82 border-color: $spinner-single-color;
83 }
85 .mdl-spinner.is-active & {
86 animation:
87 mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
88 $animation-curve-fast-out-slow-in infinite both,
89 mdl-spinner__layer-3-fade-in-out (4 * $spinner-arc-time)
90 $animation-curve-fast-out-slow-in infinite both;
91 }
92 }
94 .mdl-spinner__layer-4 {
95 border-color: $spinner-color-4;
97 .mdl-spinner--single-color & {
98 border-color: $spinner-single-color;
99 }
101 .mdl-spinner.is-active & {
102 animation:
103 mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
104 $animation-curve-fast-out-slow-in infinite both,
105 mdl-spinner__layer-4-fade-in-out (4 * $spinner-arc-time)
106 $animation-curve-fast-out-slow-in infinite both;
107 }
108 }
110 @keyframes mdl-spinner__fill-unfill-rotate {
111 12.5% { transform: rotate(0.5 * $spinner-arc-size); }
112 25% { transform: rotate($spinner-arc-size); }
113 37.5% { transform: rotate(1.5 * $spinner-arc-size); }
114 50% { transform: rotate(2 * $spinner-arc-size); }
115 62.5% { transform: rotate(2.5 * $spinner-arc-size); }
116 75% { transform: rotate(3 * $spinner-arc-size); }
117 87.5% { transform: rotate(3.5 * $spinner-arc-size); }
118 to { transform: rotate(4 * $spinner-arc-size); }
119 }
121 /**
122 * HACK: Even though the intention is to have the current .mdl-spinner__layer-N
123 * at `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
124 * to do proper subpixel rendering for the elements being animated. This is
125 * especially visible in Chrome 39 on Ubuntu 14.04. See:
126 *
127 * - https://github.com/Polymer/paper-spinner/issues/9
128 * - https://code.google.com/p/chromium/issues/detail?id=436255
129 */
130 @keyframes mdl-spinner__layer-1-fade-in-out {
131 from { opacity: 0.99; }
132 25% { opacity: 0.99; }
133 26% { opacity: 0; }
134 89% { opacity: 0; }
135 90% { opacity: 0.99; }
136 100% { opacity: 0.99; }
137 }
139 @keyframes mdl-spinner__layer-2-fade-in-out {
140 from { opacity: 0; }
141 15% { opacity: 0; }
142 25% { opacity: 0.99; }
143 50% { opacity: 0.99; }
144 51% { opacity: 0; }
145 }
147 @keyframes mdl-spinner__layer-3-fade-in-out {
148 from { opacity: 0; }
149 40% { opacity: 0; }
150 50% { opacity: 0.99; }
151 75% { opacity: 0.99; }
152 76% { opacity: 0; }
153 }
155 @keyframes mdl-spinner__layer-4-fade-in-out {
156 from { opacity: 0; }
157 65% { opacity: 0; }
158 75% { opacity: 0.99; }
159 90% { opacity: 0.99; }
160 100% { opacity: 0; }
161 }
163 /**
164 * Patch the gap that appear between the two adjacent
165 * div.mdl-spinner__circle-clipper while the spinner is rotating
166 * (appears on Chrome 38, Safari 7.1, and IE 11).
167 *
168 * Update: the gap no longer appears on Chrome when .mdl-spinner__layer-N's
169 * opacity is 0.99, but still does on Safari and IE.
170 */
171 .mdl-spinner__gap-patch {
172 position: absolute;
173 box-sizing: border-box;
174 top: 0;
175 left: 45%;
176 width: 10%;
177 height: 100%;
178 overflow: hidden;
179 border-color: inherit;
181 & .mdl-spinner__circle {
182 width: 1000%;
183 left: -450%;
184 }
185 }
187 .mdl-spinner__circle-clipper {
188 display: inline-block;
189 position: relative;
190 width: 50%;
191 height: 100%;
192 overflow: hidden;
193 border-color: inherit;
195 & .mdl-spinner__circle {
196 width: 200%;
197 }
198 }
200 .mdl-spinner__circle {
201 box-sizing: border-box;
202 height: 100%;
203 border-width: $spinner-stroke-width;
204 border-style: solid;
205 border-color: inherit;
206 border-bottom-color: transparent !important;
207 border-radius: 50%;
208 animation: none;
210 position: absolute;
211 top: 0;
212 right: 0;
213 bottom: 0;
214 left: 0;
216 .mdl-spinner__left & {
217 border-right-color: transparent !important;
218 transform: rotate(129deg);
220 .mdl-spinner.is-active & {
221 animation: mdl-spinner__left-spin $spinner-arc-time
222 $animation-curve-fast-out-slow-in infinite both;
223 }
224 }
226 .mdl-spinner__right & {
227 left: -100%;
228 border-left-color: transparent !important;
229 transform: rotate(-129deg);
231 .mdl-spinner.is-active & {
232 animation: mdl-spinner__right-spin $spinner-arc-time
233 $animation-curve-fast-out-slow-in infinite both;
234 }
235 }
236 }
238 @keyframes mdl-spinner__left-spin {
239 from { transform: rotate(130deg); }
240 50% { transform: rotate(-5deg); }
241 to { transform: rotate(130deg); }
242 }
244 @keyframes mdl-spinner__right-spin {
245 from { transform: rotate(-130deg); }
246 50% { transform: rotate(5deg); }
247 to { transform: rotate(-130deg); }
248 }