最近在做手机端web页面开发，ajax的缓冲等待需要一个缓冲图标，到网上找了个不错的效果，但应用起来不太方便，所以对其进行了行进一步改造和封装，使其更易应用和控制。
废话不多说，代码如下：
1，一个css文件，负责样式：
NSpinner.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
.spinner_continaer {
position
:
fixed
;
top
:
30%
;
left
:
50%
;
width
:
1px
;
height
:
1px
;
overflow
:
visible
;
}
.spinner {
position
:
absolute
;
margin
:
auto
;
top
:
-3em
;
left
:
-3em
;
width
:
6.250em
;
height
:
6.250em
;
-webkit-animation: rotate
2.4
s linear infinite;
}
.
white
{
top
:
0
;
bottom
:
0
;
left
:
0
;
right
:
0
;
background
:
white
;
-webkit-animation: flash
1.5
s linear infinite;
opacity:
0
;
}
.dot {
position
:
absolute
;
margin
:
auto
;
width
:
2.4em
;
height
:
2.4em
;
border-radius:
100%
;
transition:
all
1
s ease;
}
.dot:nth-child(
2
) {
top
:
0
;
bottom
:
0
;
left
:
0
;
background
:
#FF4444
;
-webkit-animation: dotsY
1.5
s linear infinite;
}
.dot:nth-child(
3
) {
left
:
0
;
right
:
0
;
top
:
0
;
background
:
#FFBB33
;
-webkit-animation: dotsX
1.5
s linear infinite;
}
.dot:nth-child(
4
) {
top
:
0
;
bottom
:
0
;
right
:
0
;
background
:
#99CC00
;
-webkit-animation: dotsY
1.5
s linear infinite;
}
.dot:nth-child(
5
) {
left
:
0
;
right
:
0
;
bottom
:
0
;
background
:
#33B5E5
;
-webkit-animation: dotsX
1.5
s linear infinite;
}
@-webkit-keyframes rotate {
0%
{
-webkit-transform: rotate(
0
);
}
10%
{
width
:
6.250em
;
height
:
6.250em
;
}
66%
{
width
:
2.4em
;
height
:
2.4em
;
}
100%
{
-webkit-transform: rotate(
360
deg);
width
:
6.250em
;
height
:
6.250em
;
}
}
@-webkit-keyframes dotsY {
66%
{
opacity: .
1
;
width
:
2.4em
;
}
77%
{
opacity:
1
;
width
:
0
;
}
}
@-webkit-keyframes dotsX {
66%
{
opacity: .
1
;
height
:
2.4em
;
}
77%
{
opacity:
1
;
height
:
0
;
}
}
@-webkit-keyframes flash {
33%
{
opacity:
0
;
border-radius:
0%
;
}
55%
{
opacity: .
6
;
border-radius:
100%
;
}
66%
{
opacity:
0
;
}
}
|
2,一个js文件，控制元素创建及显示隐藏：
NSpinner.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
/**
* 手机端进度展示，样式依赖于“spinner.css”
*/
function
NSpinner() {
}
/**
* 进度展示容器
*/
NSpinner.container;
/**
* 显示进度展示，若进度存在（之前创建过），直接显示出来，不存在就先创建再显示
*
*/
NSpinner.show =
function
() {
if
(!NSpinner.container) {
var
mainCon = document.createElement(
"div"
);
mainCon.className =
"spinner_continaer"
;
// 创建容器
var
spiContainer = document.createElement(
"div"
);
spiContainer.className =
"spinner"
;
// 创建进度1
var
spiRect1 = document.createElement(
"div"
);
spiRect1.className =
"dot white"
;
// 创建进度2
var
spiRect2 = document.createElement(
"div"
);
spiRect2.className =
"dot"
;
// 创建进度3
var
spiRect3 = document.createElement(
"div"
);
spiRect3.className =
"dot"
;
// 创建进度4
var
spiRect4 = document.createElement(
"div"
);
spiRect4.className =
"dot"
;
// 创建进度5
var
spiRect5 = document.createElement(
"div"
);
spiRect5.className =
"dot"
;
// 添加进度
spiContainer.appendChild(spiRect1);
spiContainer.appendChild(spiRect2);
spiContainer.appendChild(spiRect3);
spiContainer.appendChild(spiRect4);
spiContainer.appendChild(spiRect5);
mainCon.appendChild(spiContainer);
NSpinner.container = mainCon;
// 将创建好的进度条添加到body中
document.getElementsByTagName(
"body"
)[0].appendChild(mainCon);
}
else
{
NSpinner.container.style.display =
"block"
;
}
};
/**
* 隐藏进度展示
*/
NSpinner.hide =
function
() {
NSpinner.container.style.display =
"none"
;
};
|
3，最后是一个测试html页面：
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!
DOCTYPE
html>
<
html
>
<
head
>
<
meta
name
=
"viewport"
content
=
"width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
title
>NSpinner</
title
>
<
link
rel
=
"stylesheet"
href
=
"resources/styles/NSpinner.css"
>
<
script
type
=
"text/javascript"
src
=
"resources/scripts/NSpinner.js"
></
script
>
<
script
type
=
"text/javascript"
>
function showSpinner() {
if (NSpinner) {
NSpinner.show();
}
}
function hideSpinner() {
if (NSpinner) {
NSpinner.hide();
}
}
</
script
>
</
head
>
<
body
>
<
button
onclick
=
"showSpinner();"
>显示</
button
>
<
button
onclick
=
"hideSpinner();"
>隐藏</
button
>
</
body
>
</
html
>
|
以上就是所有代码，html页仅负责测试，主要应用时NSpinner.js和NSPinner.css。
原理很简单，首次调用
|
1
|
NSpinner.show();
|
的时候用js创建出所有元素，并添加到body里面，调用
|
1
|
NSpinner.hide();
|
的时候将display置为none，第二次及以后调用
|
1
|
NSpinner.show();
|
的时候将display置为block。
注意：因为用到了css3的部分属性，pc端部分浏览器的兼容性可能存在问题，仅对wenkit内核浏览器做了适配。
另外可以到Github上下载项目源码。https://github.com/lufaxin/NSpinner
2017-08-30更新：
重写js如下：
(function (win) {
function _NSpinner() {
this.ele = undefined;
this.show = function () {
if (this.ele == undefined) {
var mainCon = document.createElement("div");
mainCon.className = "spinner_continaer";
mainCon.id = "__spinner_continaer";
// 创建容器
var spiContainer = document.createElement("div");
spiContainer.className = "spinner";
// 创建进度1
var spiRect1 = document.createElement("div");
spiRect1.className = "dot white";
// 创建进度2
var spiRect2 = document.createElement("div");
spiRect2.className = "dot";
// 创建进度3
var spiRect3 = document.createElement("div");
spiRect3.className = "dot";
// 创建进度4
var spiRect4 = document.createElement("div");
spiRect4.className = "dot";
// 创建进度5
var spiRect5 = document.createElement("div");
spiRect5.className = "dot";
// 添加进度
spiContainer.appendChild(spiRect1);
spiContainer.appendChild(spiRect2);
spiContainer.appendChild(spiRect3);
spiContainer.appendChild(spiRect4);
spiContainer.appendChild(spiRect5);
mainCon.appendChild(spiContainer);
// 将创建好的进度条添加到body中
document.getElementsByTagName("body")[0].appendChild(mainCon);
this.ele = document.getElementById("__spinner_continaer");
}
this.ele.style.display = "block";
};
this.hide = function () {
if (this.ele != undefined) {
this.ele.style.display = "none";
}
};
}
win.NSpinner = new _NSpinner();
})(window);调用方式不变
扫一扫
4076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
