Skip to content

Commit 461f0ae

Browse files
PeachScriptPeachScript
committed
Modify the structure of style for loading animations
1 parent db286d6 commit 461f0ae

File tree

4 files changed

+249
-243
lines changed

4 files changed

+249
-243
lines changed

‎src/components/InfiniteLoading.vue

Lines changed: 4 additions & 243 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<div class="infinite-loading-container">
33
<i class="icon-loading" v-show="isLoading"></i>
4-
<div class="infinite-status-tips" v-show="!isLoading && isNoResults">
4+
<div class="infinite-status-prompt" v-show="!isLoading && isNoResults">
55
<slot name="no-results">No results :(</slot>
66
</div>
7-
<div class="infinite-status-tips" v-show="!isLoading && isNoMore">
7+
<div class="infinite-status-prompt" v-show="!isLoading && isNoMore">
88
<slot name="no-more">No more data :)</slot>
99
</div>
1010
</div>
@@ -108,237 +108,7 @@
108108
};
109109
</script>
110110
<style lang="less" scoped>
111-
.icon-loading{
112-
position: relative;
113-
border: 1px solid #999;
114-
animation: ease icon-rotating 1.5s infinite;
115-
&:before{
116-
@size: 6px;
117-
content: '';
118-
position: absolute;
119-
display: block;
120-
top: 0;
121-
left: 50%;
122-
margin-top: -@size/2;
123-
margin-left: -@size/2;
124-
width: @size;
125-
height: @size;
126-
background-color: #999;
127-
border-radius: 50%;
128-
}
129-
}
130-
.icon-wave-dots{
131-
position: relative;
132-
&:before{
133-
@size: 8px;
134-
@wave: -6px;
135-
@near-wave: -4px;
136-
@after-wave: 2px;
137-
@c-wave: #999;
138-
@c-near-wave: #bbb;
139-
content: '';
140-
position: absolute;
141-
top: 50%;
142-
left: 50%;
143-
margin-left: -@size/2;
144-
margin-top: -@size/2;
145-
width: @size;
146-
height: @size;
147-
background-color: @c-near-wave;
148-
border-radius: 50%;
149-
animation: linear icon-wave-dots 2.8s infinite;
150-
@keyframes icon-wave-dots{
151-
0%{
152-
box-shadow: -@size * 4 0 0 @c-near-wave,
153-
-@size * 2 0 0 @c-near-wave,
154-
@size * 2 0 0 @c-near-wave,
155-
@size * 4 0 0 @c-near-wave;
156-
}
157-
5%{
158-
box-shadow: -@size * 4 @near-wave 0 @c-near-wave,
159-
-@size * 2 0 0 @c-near-wave,
160-
@size * 2 0 0 @c-near-wave,
161-
@size * 4 0 0 @c-near-wave;
162-
transform: translateY(0);
163-
}
164-
10%{
165-
box-shadow: -@size * 4 @wave 0 @c-wave,
166-
-@size * 2 @near-wave 0 @c-near-wave,
167-
@size * 2 0 0 @c-near-wave,
168-
@size * 4 0 0 @c-near-wave;
169-
transform: translateY(0);
170-
}
171-
15%{
172-
box-shadow: -@size * 4 @after-wave 0 @c-near-wave,
173-
-@size * 2 @wave - @near-wave 0 @c-wave,
174-
@size * 2 -@near-wave 0 @c-near-wave,
175-
@size * 4 -@near-wave 0 @c-near-wave;
176-
transform: translateY(@near-wave);
177-
background-color: @c-near-wave;
178-
}
179-
20%{
180-
box-shadow: -@size * 4 -@wave 0 @c-near-wave,
181-
-@size * 2 @near-wave - @wave + @after-wave 0 @c-near-wave,
182-
@size * 2 @near-wave - @wave 0 @c-near-wave,
183-
@size * 4 -@wave 0 @c-near-wave;
184-
transform: translateY(@wave);
185-
background-color: @c-wave;
186-
}
187-
25%{
188-
@offset: @near-wave + @after-wave;
189-
box-shadow: -@size * 4 -@offset 0 @c-near-wave,
190-
-@size * 2 -@offset 0 @c-near-wave,
191-
@size * 2 @wave - @offset 0 @c-wave,
192-
@size * 4 @near-wave - @offset 0 @c-near-wave;
193-
transform: translateY(@offset);
194-
background-color: @c-near-wave;
195-
}
196-
30%{
197-
box-shadow: -@size * 4 0 0 @c-near-wave,
198-
-@size * 2 0 0 @c-near-wave,
199-
@size * 2 @near-wave + @after-wave 0 @c-near-wave,
200-
@size * 4 @wave 0 @c-wave;
201-
transform: translateY(0);
202-
}
203-
35%{
204-
box-shadow: -@size * 4 0 0 @c-near-wave,
205-
-@size * 2 0 0 @c-near-wave,
206-
@size * 2 0 0 @c-near-wave,
207-
@size * 4 @near-wave + @after-wave 0 @c-near-wave;
208-
}
209-
40%{
210-
box-shadow: -@size * 4 0 0 @c-near-wave,
211-
-@size * 2 0 0 @c-near-wave,
212-
@size * 2 0 0 @c-near-wave,
213-
@size * 4 0 0 @c-near-wave;
214-
}
215-
100%{
216-
box-shadow: -@size * 4 0 0 @c-near-wave,
217-
-@size * 2 0 0 @c-near-wave,
218-
@size * 2 0 0 @c-near-wave,
219-
@size * 4 0 0 @c-near-wave;
220-
}
221-
}
222-
}
223-
}
224-
225-
.icon-spiral{
226-
border: 2px solid #777;
227-
border-right-color: transparent;
228-
animation: linear icon-rotating .85s infinite;
229-
}
230-
231-
.icon-circles{
232-
position: relative;
233-
&:before{
234-
@size: 5px;
235-
@radius: 12px;
236-
@shallow: 8%;
237-
@c-base: #505050;
238-
content: '';
239-
position: absolute;
240-
left: 50%;
241-
top: 50%;
242-
margin-top: -@size/2;
243-
margin-left: -@size/2;
244-
width: @size;
245-
height: @size;
246-
border-radius: 50%;
247-
animation: linear icon-circles .75s infinite;
248-
@keyframes icon-circles{
249-
0%{
250-
box-shadow: 0 -@radius 0 @c-base,
251-
@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow),
252-
@radius 0 0 lighten(@c-base, @shallow * 2),
253-
@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 3),
254-
0 @radius 0 lighten(@c-base, @shallow * 4),
255-
-@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 5),
256-
-@radius 0 0 lighten(@c-base, @shallow * 6),
257-
-@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 7);
258-
}
259-
12.5%{
260-
box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 7),
261-
@radius * 0.71 -@radius * 0.71 0 @c-base,
262-
@radius 0 0 lighten(@c-base, @shallow * 1),
263-
@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 2),
264-
0 @radius 0 lighten(@c-base, @shallow * 3),
265-
-@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 4),
266-
-@radius 0 0 lighten(@c-base, @shallow * 5),
267-
-@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 6);
268-
}
269-
25%{
270-
box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 6),
271-
@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 7),
272-
@radius 0 0 @c-base,
273-
@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 1),
274-
0 @radius 0 lighten(@c-base, @shallow * 2),
275-
-@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 3),
276-
-@radius 0 0 lighten(@c-base, @shallow * 4),
277-
-@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 5);
278-
}
279-
37.5%{
280-
box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 5),
281-
@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 6),
282-
@radius 0 0 lighten(@c-base, @shallow * 7),
283-
@radius * 0.71 @radius * 0.71 0 @c-base,
284-
0 @radius 0 lighten(@c-base, @shallow * 1),
285-
-@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 2),
286-
-@radius 0 0 lighten(@c-base, @shallow * 3),
287-
-@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 4);
288-
}
289-
50%{
290-
box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 4),
291-
@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 5),
292-
@radius 0 0 lighten(@c-base, @shallow * 6),
293-
@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 7),
294-
0 @radius 0 @c-base,
295-
-@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 1),
296-
-@radius 0 0 lighten(@c-base, @shallow * 2),
297-
-@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 3);
298-
}
299-
62.5%{
300-
box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 3),
301-
@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 4),
302-
@radius 0 0 lighten(@c-base, @shallow * 5),
303-
@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 6),
304-
0 @radius 0 lighten(@c-base, @shallow * 7),
305-
-@radius * 0.71 @radius * 0.71 0 @c-base,
306-
-@radius 0 0 lighten(@c-base, @shallow * 1),
307-
-@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 2);
308-
}
309-
75%{
310-
box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 2),
311-
@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 3),
312-
@radius 0 0 lighten(@c-base, @shallow * 4),
313-
@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 5),
314-
0 @radius 0 lighten(@c-base, @shallow * 6),
315-
-@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 7),
316-
-@radius 0 0 @c-base,
317-
-@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 1);
318-
}
319-
87.5%{
320-
box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 1),
321-
@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 2),
322-
@radius 0 0 lighten(@c-base, @shallow * 3),
323-
@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 4),
324-
0 @radius 0 lighten(@c-base, @shallow * 5),
325-
-@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 6),
326-
-@radius 0 0 lighten(@c-base, @shallow * 7),
327-
-@radius * 0.71 -@radius * 0.71 0 @c-base;
328-
}
329-
100%{
330-
box-shadow: 0 -@radius 0 @c-base,
331-
@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow),
332-
@radius 0 0 lighten(@c-base, @shallow * 2),
333-
@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 3),
334-
0 @radius 0 lighten(@c-base, @shallow * 4),
335-
-@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 5),
336-
-@radius 0 0 lighten(@c-base, @shallow * 6),
337-
-@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 7);
338-
}
339-
}
340-
}
341-
}
111+
@import '../styles/spinner';
342112
343113
.infinite-loading-container{
344114
clear: both;
@@ -355,19 +125,10 @@
355125
}
356126
}
357127
358-
.infinite-status-tips{
128+
.infinite-status-prompt{
359129
color: #666;
360130
font-size: 14px;
361131
text-align: center;
362132
padding: 10px 0;
363133
}
364-
365-
@keyframes icon-rotating{
366-
0%{
367-
transform: rotate(0);
368-
}
369-
100%{
370-
transform: rotate(360deg);
371-
}
372-
}
373134
</style>

‎src/styles/circles.less

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
@size: 5px;
2+
@radius: 12px;
3+
@shallow: 8%;
4+
@c-base: #505050;
5+
6+
.icon-circles{
7+
position: relative;
8+
&:before{
9+
content: '';
10+
position: absolute;
11+
left: 50%;
12+
top: 50%;
13+
margin-top: -@size/2;
14+
margin-left: -@size/2;
15+
width: @size;
16+
height: @size;
17+
border-radius: 50%;
18+
animation: linear icon-circles .75s infinite;
19+
}
20+
}
21+
22+
@keyframes icon-circles{
23+
0%{
24+
box-shadow: 0 -@radius 0 @c-base,
25+
@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow),
26+
@radius 0 0 lighten(@c-base, @shallow * 2),
27+
@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 3),
28+
0 @radius 0 lighten(@c-base, @shallow * 4),
29+
-@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 5),
30+
-@radius 0 0 lighten(@c-base, @shallow * 6),
31+
-@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 7);
32+
}
33+
12.5%{
34+
box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 7),
35+
@radius * 0.71 -@radius * 0.71 0 @c-base,
36+
@radius 0 0 lighten(@c-base, @shallow * 1),
37+
@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 2),
38+
0 @radius 0 lighten(@c-base, @shallow * 3),
39+
-@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 4),
40+
-@radius 0 0 lighten(@c-base, @shallow * 5),
41+
-@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 6);
42+
}
43+
25%{
44+
box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 6),
45+
@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 7),
46+
@radius 0 0 @c-base,
47+
@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 1),
48+
0 @radius 0 lighten(@c-base, @shallow * 2),
49+
-@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 3),
50+
-@radius 0 0 lighten(@c-base, @shallow * 4),
51+
-@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 5);
52+
}
53+
37.5%{
54+
box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 5),
55+
@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 6),
56+
@radius 0 0 lighten(@c-base, @shallow * 7),
57+
@radius * 0.71 @radius * 0.71 0 @c-base,
58+
0 @radius 0 lighten(@c-base, @shallow * 1),
59+
-@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 2),
60+
-@radius 0 0 lighten(@c-base, @shallow * 3),
61+
-@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 4);
62+
}
63+
50%{
64+
box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 4),
65+
@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 5),
66+
@radius 0 0 lighten(@c-base, @shallow * 6),
67+
@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 7),
68+
0 @radius 0 @c-base,
69+
-@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 1),
70+
-@radius 0 0 lighten(@c-base, @shallow * 2),
71+
-@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 3);
72+
}
73+
62.5%{
74+
box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 3),
75+
@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 4),
76+
@radius 0 0 lighten(@c-base, @shallow * 5),
77+
@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 6),
78+
0 @radius 0 lighten(@c-base, @shallow * 7),
79+
-@radius * 0.71 @radius * 0.71 0 @c-base,
80+
-@radius 0 0 lighten(@c-base, @shallow * 1),
81+
-@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 2);
82+
}
83+
75%{
84+
box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 2),
85+
@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 3),
86+
@radius 0 0 lighten(@c-base, @shallow * 4),
87+
@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 5),
88+
0 @radius 0 lighten(@c-base, @shallow * 6),
89+
-@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 7),
90+
-@radius 0 0 @c-base,
91+
-@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 1);
92+
}
93+
87.5%{
94+
box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 1),
95+
@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 2),
96+
@radius 0 0 lighten(@c-base, @shallow * 3),
97+
@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 4),
98+
0 @radius 0 lighten(@c-base, @shallow * 5),
99+
-@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 6),
100+
-@radius 0 0 lighten(@c-base, @shallow * 7),
101+
-@radius * 0.71 -@radius * 0.71 0 @c-base;
102+
}
103+
100%{
104+
box-shadow: 0 -@radius 0 @c-base,
105+
@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow),
106+
@radius 0 0 lighten(@c-base, @shallow * 2),
107+
@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 3),
108+
0 @radius 0 lighten(@c-base, @shallow * 4),
109+
-@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 5),
110+
-@radius 0 0 lighten(@c-base, @shallow * 6),
111+
-@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 7);
112+
}
113+
}

0 commit comments

Comments
 (0)