Skip to content

Commit 5a6dc34

Browse files
PeachScriptPeachScript
committed
Add a new loading animation what called bubbles
1 parent 48d15ba commit 5a6dc34

File tree

2 files changed

+112
-0
lines changed

2 files changed

+112
-0
lines changed

‎src/styles/bubbles.less

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
.loading-bubbles{
2+
@size: 1px;
3+
@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;
69+
}
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;
109+
}
110+
}
111+
}

‎src/styles/spinner.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import './wave-dots';
22
@import './circles';
3+
@import './bubbles';
34

45
.icon-loading{
56
position: relative;

0 commit comments

Comments
 (0)