Skip to content

Commit 53cfec3

Browse files
PeachScriptPeachScript
committed
Modify the name of all spinners to prevent to conflict with other CSS library
1 parent 5a6dc34 commit 53cfec3

File tree

4 files changed

+183
-186
lines changed

4 files changed

+183
-186
lines changed

‎src/components/InfiniteLoading.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="infinite-loading-container">
3-
<i class="icon-loading" v-show="isLoading"></i>
3+
<i class="loading-default" v-show="isLoading"></i>
44
<div class="infinite-status-prompt" v-show="!isLoading && isNoResults">
55
<slot name="no-results">No results :(</slot>
66
</div>
@@ -113,7 +113,7 @@
113113
.infinite-loading-container{
114114
clear: both;
115115
text-align: center;
116-
*[class^=icon-]{
116+
*[class^=loading-]{
117117
@size: 28px;
118118
display: inline-block;
119119
margin: 15px 0;

‎src/styles/circles.less‎

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

‎src/styles/spinner.less‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
@import './circles';
33
@import './bubbles';
44

5-
.icon-loading{
5+
.loading-default{
66
position: relative;
77
border: 1px solid #999;
8-
animation: ease icon-rotating 1.5s infinite;
8+
animation: ease loading-rotating 1.5s infinite;
99
&:before{
1010
@size: 6px;
1111
content: '';
@@ -22,13 +22,13 @@
2222
}
2323
}
2424

25-
.icon-spiral{
25+
.loading-spiral{
2626
border: 2px solid #777;
2727
border-right-color: transparent;
28-
animation: linear icon-rotating .85s infinite;
28+
animation: linear loading-rotating .85s infinite;
2929
}
3030

31-
@keyframes icon-rotating{
31+
@keyframes loading-rotating{
3232
0%{
3333
transform: rotate(0);
3434
}

0 commit comments

Comments
 (0)