Skip to content

Commit 6168c31

Browse files
PeachScriptPeachScript
committed
Modify the way to render the spinners to reduce size of the bundle
1 parent fc08a36 commit 6168c31

File tree

5 files changed

+217
-289
lines changed

5 files changed

+217
-289
lines changed

‎src/components/InfiniteLoading.vue‎

Lines changed: 46 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="infinite-loading-container">
33
<div v-show="isLoading">
44
<slot name="spinner">
5-
<i :class="spinnerType"></i>
5+
<component :is="spinnerView"></component>
66
</slot>
77
</div>
88
<div class="infinite-status-prompt" v-show="isNoResults">
@@ -19,11 +19,47 @@
1919
const LOOP_CHECK_TIMEOUT = 1000; // the timeout for check infinite loop
2020
const LOOP_CHECK_MAX_CALLS = 10; // the maximum number of continuous calls
2121
const SPINNERS = {
22-
BUBBLES: 'loading-bubbles',
23-
CIRCLES: 'loading-circles',
24-
DEFAULT: 'loading-default',
25-
SPIRAL: 'loading-spiral',
26-
WAVEDOTS: 'loading-wave-dots',
22+
BUBBLES: {
23+
template: `
24+
<span class="loading-bubbles">
25+
<span class="bubble-item"></span>
26+
<span class="bubble-item"></span>
27+
<span class="bubble-item"></span>
28+
<span class="bubble-item"></span>
29+
<span class="bubble-item"></span>
30+
<span class="bubble-item"></span>
31+
<span class="bubble-item"></span>
32+
<span class="bubble-item"></span>
33+
</span>
34+
`,
35+
},
36+
CIRCLES: {
37+
template: `<span class="loading-circles">
38+
<span class="circle-item"></span>
39+
<span class="circle-item"></span>
40+
<span class="circle-item"></span>
41+
<span class="circle-item"></span>
42+
<span class="circle-item"></span>
43+
<span class="circle-item"></span>
44+
<span class="circle-item"></span>
45+
<span class="circle-item"></span>
46+
</span>`,
47+
},
48+
DEFAULT: {
49+
template: '<i class="loading-default"></i>',
50+
},
51+
SPIRAL: {
52+
template: '<i class="loading-spiral"></i>',
53+
},
54+
WAVEDOTS: {
55+
template: `<span class="loading-wave-dots">
56+
<span class="wave-item"></span>
57+
<span class="wave-item"></span>
58+
<span class="wave-item"></span>
59+
<span class="wave-item"></span>
60+
<span class="wave-item"></span>
61+
</span>`,
62+
},
2763
};
2864
const WARNINGS = {
2965
STATE_CHANGER: [
@@ -80,7 +116,7 @@
80116
};
81117
},
82118
computed: {
83-
spinnerType() {
119+
spinnerView() {
84120
return SPINNERS[(this.spinner || '').toUpperCase()] || SPINNERS.DEFAULT;
85121
},
86122
isNoResults: {
@@ -288,10 +324,10 @@
288324
<style lang="less" scoped>
289325
@import '../styles/spinner';
290326
291-
.infinite-loading-container{
327+
.infinite-loading-container {
292328
clear: both;
293329
text-align: center;
294-
*[class^=loading-]{
330+
@{deep} *[class^=loading-] {
295331
@size: 28px;
296332
display: inline-block;
297333
margin: 15px 0;
@@ -303,7 +339,7 @@
303339
}
304340
}
305341
306-
.infinite-status-prompt{
342+
.infinite-status-prompt {
307343
color: #666;
308344
font-size: 14px;
309345
text-align: center;

‎src/styles/bubbles.less‎

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

0 commit comments

Comments
 (0)