Skip to content

Commit 61f9265

Browse files
author
xutao15
committed
add spin component
1 parent af8251f commit 61f9265

File tree

21 files changed

+795
-1
lines changed

21 files changed

+795
-1
lines changed

‎dist/components/spin/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import spin from 'spin.vue'
2+
3+
export default spin

‎dist/components/spin/spin.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div class="i-spin"
3+
:class="[iClass, fix ? 'i-spin-fix' : '', 'i-spin-' + size, custom ? 'i-spin-show-text' : '', fullscreen ? 'i-spin-fullscreen' : '']">
4+
<div class="i-spin-main">
5+
<div class="i-spin-dot"></div>
6+
<div class="i-spin-text"><slot></slot></div>
7+
</div>
8+
</div>
9+
</template>
10+
<script>
11+
export default {
12+
props: {
13+
iClass: {
14+
type: String,
15+
default: ''
16+
},
17+
size: {
18+
type: String,
19+
default: 'default'
20+
},
21+
fix: {
22+
type: Boolean,
23+
default: false,
24+
},
25+
fullscreen: {
26+
type: Boolean,
27+
default: false
28+
},
29+
custom: {
30+
type: Boolean,
31+
default: false
32+
}
33+
}
34+
}
35+
</script>
36+

‎dist/components/spin/style/css.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './spin.css'

‎dist/components/spin/style/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './spin.less'

‎dist/components/spin/style/spin.css

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
.i-spin {
2+
color: #2d8cf0;
3+
vertical-align: middle;
4+
text-align: center;
5+
}
6+
.i-spin-dot {
7+
position: relative;
8+
display: block;
9+
border-radius: 50%;
10+
background-color: #2d8cf0;
11+
width: 20px;
12+
height: 20px;
13+
-webkit-animation: ani-spin-bounce 1s 0s ease-in-out infinite;
14+
animation: ani-spin-bounce 1s 0s ease-in-out infinite;
15+
}
16+
.i-spin-large .i-spin-dot {
17+
width: 32px;
18+
height: 32px;
19+
}
20+
.i-spin-small .i-spin-dot {
21+
width: 12px;
22+
height: 12px;
23+
}
24+
.i-spin-fix {
25+
position: absolute;
26+
top: 0;
27+
left: 0;
28+
z-index: 8;
29+
width: 100%;
30+
height: 100%;
31+
background-color: rgba(255, 255, 255, 0.9);
32+
}
33+
.i-spin-fullscreen {
34+
z-index: 2010;
35+
}
36+
.i-spin-fullscreen-wrapper {
37+
position: fixed;
38+
top: 0;
39+
right: 0;
40+
bottom: 0;
41+
left: 0;
42+
}
43+
.i-spin-fix .i-spin-main {
44+
position: absolute;
45+
top: 50%;
46+
left: 50%;
47+
-ms-transform: translate(-50%, -50%);
48+
-webkit-transform: translate(-50%, -50%);
49+
transform: translate(-50%, -50%);
50+
}
51+
.i-spin-fix .i-spin-dot {
52+
display: inline-block;
53+
}
54+
.i-spin-text,
55+
.i-spin-show-text .i-spin-dot {
56+
display: none;
57+
}
58+
.i-spin-show-text .i-spin-text {
59+
display: block;
60+
font-size: 14px;
61+
}
62+
@-webkit-keyframes ani-spin-bounce {
63+
0% {
64+
-webkit-transform: scale(0);
65+
transform: scale(0);
66+
}
67+
100% {
68+
-webkit-transform: scale(1);
69+
transform: scale(1);
70+
opacity: 0;
71+
}
72+
}
73+
@keyframes ani-spin-bounce {
74+
0% {
75+
-webkit-transform: scale(0);
76+
transform: scale(0);
77+
}
78+
100% {
79+
-webkit-transform: scale(1);
80+
transform: scale(1);
81+
opacity: 0;
82+
}
83+
}

‎dist/components/spin/style/spin.less

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
@import "../../common/_base.less";
2+
@import "../../common/_mixins.less";
3+
4+
@spin-dot-size-small: 12px;
5+
@spin-dot-size: 20px;
6+
@spin-dot-size-large: 32px;
7+
8+
.size(@width; @height) {
9+
width: @width;
10+
height: @height;
11+
}
12+
13+
.square(@size) {
14+
.size(@size; @size);
15+
}
16+
17+
.i-spin {
18+
color: @primary-color;
19+
vertical-align: middle;
20+
text-align: center;
21+
22+
&-dot {
23+
position: relative;
24+
display: block;
25+
border-radius: 50%;
26+
background-color: @primary-color;
27+
.square(@spin-dot-size);
28+
animation: ani-spin-bounce 1s 0s ease-in-out infinite;
29+
}
30+
31+
&-large &-dot {
32+
.square(@spin-dot-size-large);
33+
}
34+
35+
&-small &-dot {
36+
.square(@spin-dot-size-small);
37+
}
38+
39+
&-fix {
40+
position: absolute;
41+
top: 0;
42+
left: 0;
43+
z-index: @zindex-spin;
44+
.square(100%);
45+
background-color: rgba(255, 255, 255, 0.9);
46+
}
47+
&-fullscreen {
48+
z-index: @zindex-spin-fullscreen;
49+
&-wrapper {
50+
position: fixed;
51+
top: 0;
52+
right: 0;
53+
bottom: 0;
54+
left: 0;
55+
}
56+
}
57+
58+
&-fix &-main {
59+
position: absolute;
60+
top: 50%;
61+
left: 50%;
62+
-ms-transform: translate(-50%, -50%);
63+
transform: translate(-50%, -50%);
64+
}
65+
66+
&-fix &-dot {
67+
display: inline-block;
68+
}
69+
70+
&-text,
71+
&-show-text &-dot {
72+
display: none;
73+
}
74+
75+
&-show-text &-text {
76+
display: block;
77+
font-size: @size-font-base;
78+
}
79+
}
80+
81+
@keyframes ani-spin-bounce {
82+
0% {
83+
transform: scale(0);
84+
}
85+
86+
100% {
87+
transform: scale(1);
88+
opacity: 0;
89+
}
90+
}

‎examples/src/app.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@
1919
"pages/sticky/main",
2020
"pages/action-sheet/main",
2121
"pages/toast/main",
22-
"pages/modal/main"],
22+
"pages/modal/main",
23+
"pages/message/main",
24+
"pages/spin/main"],
2325
"window": {
2426
"backgroundTextStyle": "light",
2527
"navigationBarBackgroundColor": "#fff",

‎examples/src/components/spin/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import spin from 'spin.vue'
2+
3+
export default spin

‎examples/src/components/spin/spin.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div class="i-spin"
3+
:class="[iClass, fix ? 'i-spin-fix' : '', 'i-spin-' + size, custom ? 'i-spin-show-text' : '', fullscreen ? 'i-spin-fullscreen' : '']">
4+
<div class="i-spin-main">
5+
<div class="i-spin-dot"></div>
6+
<div class="i-spin-text"><slot></slot></div>
7+
</div>
8+
</div>
9+
</template>
10+
<script>
11+
export default {
12+
props: {
13+
iClass: {
14+
type: String,
15+
default: ''
16+
},
17+
size: {
18+
type: String,
19+
default: 'default'
20+
},
21+
fix: {
22+
type: Boolean,
23+
default: false,
24+
},
25+
fullscreen: {
26+
type: Boolean,
27+
default: false
28+
},
29+
custom: {
30+
type: Boolean,
31+
default: false
32+
}
33+
}
34+
}
35+
</script>
36+

‎examples/src/components/spin/style/css.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './spin.css'

0 commit comments

Comments
 (0)