Skip to content

Commit 523daed

Browse files
nguyenvanduocitnguyenvanduocit
committed
add new spinner
1 parent 84052b1 commit 523daed

File tree

6 files changed

+314
-23
lines changed

6 files changed

+314
-23
lines changed

‎src/App.vue

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@ import PingPong from './components/PingPong'
4848
import Diamond from './components/Diamond'
4949
import SpinLine from './components/SpinLine'
5050
import Plane from './components/Plane'
51+
import Mikepad from './components/Mikepad'
52+
import Jumper from './components/Jumper'
53+
import Wave from './components/Wave'
54+
import Texture from './components/Texture'
5155
export default {
5256
name: 'app',
5357
components: {
@@ -85,7 +89,11 @@ export default {
8589
PingPong,
8690
Diamond,
8791
SpinLine,
88-
Plane
92+
Plane,
93+
Mikepad,
94+
Jumper,
95+
Wave,
96+
Texture
8997
},
9098
data () {
9199
return {
@@ -96,36 +104,40 @@ export default {
96104
'RotateSquare3',
97105
'RotateSquare4',
98106
'RotateSquare5',
99-
'DoubleBounce',
100-
'Stretch',
101107
'Cube',
102108
'CubeGrid',
103109
'CubeShadow',
104-
'ScaleOut',
105-
'CircleSpin',
110+
'Stretch',
106111
'CircleSpin2',
107-
'CircleSpin3',
108112
'CircleSpin4',
113+
'CircleSpin',
114+
'CircleSpin9',
115+
'CircleSpin10',
116+
'DoubleBounce',
117+
'ScaleOut',
118+
'Jumper',
119+
'Wave',
120+
'CircleSpin3',
109121
'CircleSpin5',
110122
'CircleSpin6',
123+
'GoogleSpin',
111124
'CircleSpin7',
112-
'CircleSpin8',
113-
'CircleSpin9',
114-
'CircleSpin10',
125+
'Jawn',
115126
'ThreeDots',
116-
'GoogleSpin',
127+
'CircleSpin8',
117128
'Gauge',
118129
'Origami',
119130
'Hexagon',
120131
'Socket',
121132
'HourGlass',
122133
'Pencil',
123-
'Jawn',
124134
'LetterCube',
125135
'PingPong',
126136
'Diamond',
127137
'SpinLine',
128-
'Plane'
138+
'Plane',
139+
'Mikepad',
140+
'Texture'
129141
]
130142
}
131143
}

‎src/components/Circle8.vue

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<template>
22
<div v-bind:style="styles" class="spinner spinner--circle-8">
33
<div v-bind:style="innerStyles" class="spinner-inner">
4-
<div class="contener_mixte"><div class="ballcolor ball_1">&nbsp;</div></div>
5-
<div class="contener_mixte"><div class="ballcolor ball_2">&nbsp;</div></div>
6-
<div class="contener_mixte"><div class="ballcolor ball_3">&nbsp;</div></div>
7-
<div class="contener_mixte"><div class="ballcolor ball_4">&nbsp;</div></div>
4+
<div class="ball-container">
5+
<div class="contener_mixte"><div class="ballcolor ball_1">&nbsp;</div></div>
6+
<div class="contener_mixte"><div class="ballcolor ball_2">&nbsp;</div></div>
7+
<div class="contener_mixte"><div class="ballcolor ball_3">&nbsp;</div></div>
8+
<div class="contener_mixte"><div class="ballcolor ball_4">&nbsp;</div></div>
9+
</div>
810
</div>
911
</div>
1012
</template>
@@ -19,12 +21,7 @@ export default {
1921
innerStyles () {
2022
let size = parseInt(this.size)
2123
let baseSize = 44
22-
let ratio = 1
23-
if (size > baseSize) {
24-
ratio = baseSize / size
25-
} else {
26-
ratio = size / baseSize
27-
}
24+
let ratio = size / baseSize
2825
return {
2926
transform: 'scale(' + ratio + ')'
3027
}
@@ -48,11 +45,13 @@ export default {
4845
box-sizing: border-box;
4946
}
5047
}
51-
.spinner-inner
48+
.ball-container
5249
{
5350
animation:animball_two 1.5s infinite;
5451
width:44px;
5552
height:44px;
53+
flex-shrink: 0;
54+
position: relative;
5655
}
5756
.contener_mixte
5857
{

‎src/components/Jumper.vue

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<template>
2+
<div v-bind:style="styles" class="spinner spinner--jumper">
3+
<div></div>
4+
<div></div>
5+
<div></div>
6+
</div>
7+
</template>
8+
<script>
9+
export default {
10+
props: {
11+
size: {
12+
default: '40px'
13+
}
14+
},
15+
computed: {
16+
styles () {
17+
return {
18+
width: this.size,
19+
height: this.size
20+
}
21+
}
22+
}
23+
}
24+
</script>
25+
<style lang="scss" scoped>
26+
.spinner{
27+
* {
28+
line-height: 0;
29+
box-sizing: border-box;
30+
}
31+
}
32+
.spinner > div {
33+
background-color: #41b883;
34+
border-radius: 100%;
35+
-webkit-animation-fill-mode: both;
36+
animation-fill-mode: both;
37+
position: absolute;
38+
opacity: 0;
39+
width: 50px;
40+
height: 50px;
41+
-webkit-animation: jumper 1s 0s linear infinite;
42+
animation: jumper 1s 0s linear infinite;
43+
}
44+
.spinner > div:nth-child(2) {
45+
-webkit-animation-delay: 0.33333s;
46+
animation-delay: 0.33333s;
47+
}
48+
.spinner > div:nth-child(3) {
49+
-webkit-animation-delay: 0.66666s;
50+
animation-delay: 0.66666s;
51+
}
52+
@keyframes jumper {
53+
0% {
54+
opacity: 0;
55+
-webkit-transform: scale(0);
56+
transform: scale(0);
57+
}
58+
5% {
59+
opacity: 1;
60+
}
61+
100% {
62+
opacity: 0;
63+
}
64+
}
65+
66+
</style>

‎src/components/Mikepad.vue

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<template>
2+
<div v-bind:style="styles" class="spinner spinner--mikepad">
3+
<div v-bind:style="innerStyles" class="spinner-inner">
4+
<div class="binding"></div>
5+
<div class="pad">
6+
<div class="line line1"></div>
7+
<div class="line line2"></div>
8+
<div class="line line3"></div>
9+
</div>
10+
</div>
11+
</div>
12+
</template>
13+
<script>
14+
export default {
15+
props: {
16+
size: {
17+
default: '40px'
18+
}
19+
},
20+
computed: {
21+
innerStyles () {
22+
let size = parseInt(this.size)
23+
let baseSize = 31
24+
let ratio = size / baseSize
25+
return {
26+
transform: 'scale(' + ratio + ')'
27+
}
28+
},
29+
styles () {
30+
return {
31+
width: this.size,
32+
height: this.size
33+
}
34+
}
35+
}
36+
}
37+
</script>
38+
<style lang="scss" scoped>
39+
.spinner{
40+
display: flex;
41+
justify-content: center;
42+
align-items: center;
43+
position: relative;
44+
* {
45+
line-height: 0;
46+
box-sizing: border-box;
47+
}
48+
}
49+
50+
.spinner-inner {
51+
flex-shrink: 0;
52+
}
53+
54+
.spinner-inner .binding {
55+
content : '';
56+
width : 27px;
57+
height : 4px;
58+
border : 2px solid #41b883;
59+
margin : 0 auto;
60+
}
61+
62+
.spinner-inner .pad {
63+
width : 27px;
64+
height : 27px;
65+
border : 2px solid #41b883;
66+
border-top : 0;
67+
padding : 4px;
68+
margin : 0 auto;
69+
}
70+
71+
.spinner-inner .line {
72+
width : 15px;
73+
margin-top : 4px;
74+
border-top : 2px solid #41b883;
75+
opacity : 0;
76+
animation : mikepad-writeline 3s infinite ease-in;
77+
}
78+
79+
.spinner-inner .line:first-child {
80+
margin-top : 0;
81+
}
82+
83+
.spinner-inner .line.line1 {
84+
animation-delay: 0s;
85+
}
86+
87+
.spinner-inner .line.line2 {
88+
animation-delay: 0.5s;
89+
}
90+
91+
.spinner-inner .line.line3 {
92+
animation-delay : 1s;
93+
}
94+
95+
.spinner-inner .text {
96+
text-align : center;
97+
margin-top : 10px;
98+
font-size : 14px;
99+
color : #41b883;
100+
}
101+
@keyframes mikepad-writeline {
102+
0% { width : 0px; opacity: 0; }
103+
33% { width : 15px; opacity : 1; }
104+
70% { opacity : 1; }
105+
100% {opacity : 0; }
106+
}
107+
</style>

‎src/components/Texture.vue

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<div v-bind:style="styles" class="spinner spinner--texture"></div>
3+
</template>
4+
<script>
5+
export default {
6+
props: {
7+
size: {
8+
default: '40px'
9+
}
10+
},
11+
computed: {
12+
styles () {
13+
return {
14+
width: this.size,
15+
height: this.size
16+
}
17+
}
18+
}
19+
}
20+
</script>
21+
<style lang="scss" scoped>
22+
.spinner {
23+
flex-shrink: 0;
24+
border: 1px #41b883 solid;
25+
border-radius: 4px;
26+
position: relative;
27+
background: linear-gradient(45deg, transparent 49%, #41b883 50%, #41b883 50%, transparent 51%, transparent), linear-gradient(-45deg, transparent 49%, #41b883 50%, #41b883 50%, transparent 51%, transparent);
28+
background-size: 16px 16px;
29+
background-position: 0% 0%;
30+
animation: spTexture 1s infinite linear;
31+
}
32+
@-webkit-keyframes spTexture {
33+
from { background-position: 0px 0px; }
34+
to { background-position: -16px 0px; }
35+
}
36+
@keyframes spTexture {
37+
from { background-position: 0px 0px; }
38+
to { background-position: -16px 0px; }
39+
}
40+
</style>

0 commit comments

Comments
 (0)