<loading>{{正在加载…}}</loading> //内容也是可自定义的
效果图:
一、自定义实现效果图:
二、代码实现:
1.loading 组件的view实<!– loading开始 –>
<
em
id="__mceDel"> <
view
class="loading" wx:if="{{loadingFlag}}">
<
view
class="loading_mask"></
view
>
<
view
class="weui-loadmore">
<
view
class="weui-loading"></
view
>
<
text
class="weui-loadmore__tips">正在加载</
text
>
</
view
>
</
view
>
<!-- loading结束 -->
<
br
><
br
>调用的页面组件实现:<
br
> 配置:</
em
>
{“usingComponents”: {“com-loading”:”../component/comLoading/loading”}}
调用的页面调用:(可以自定义加载时的文字显示)
<com-loading pro-content=”正在加载”></com-loading>2.组件js:
properties: { proContent:{ type:String, value:"正在加载..." }, },
3.css样式
/* loading样式开始 */
.loading{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
}
.loading_mask{
position
:
absolute
;
width
:
45%
;
margin
:
14em
22.5%
;
height
:
2.6em
;
border-radius:
20
rpx;
background
:
#000
;
opacity: .
5
;
}
.weui-loadmore {
position
:
absolute
;
width
:
45%
;
margin
:
16em
22.5%
;
line-height
:
2.6em
;
font-size
:
14px
;
color
:
#fff
;
text-align
:
center
;
}
.weui-icon_toast.weui-loading{
margin
:
30px
0
0
;
width
:
38px
;
height
:
38px
;
vertical-align
:
baseline
;
}
.weui-loading{
width
:
20px
;
height
:
20px
;
display
:inline-
block
;
vertical-align
:
middle
;
-webkit-animation:weuiLoading
1
s steps(
12
, end) infinite;
animation:weuiLoading
1
s steps(
12
, end) infinite;
background
:
transparent
url
(
"data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E"
)
no-repeat
;
background-
size
:
100%
;
}
.weui-loading.weui-loading_transparent,
.weui-btn_loading.weui-btn_primary .weui-loading,
.weui-btn_loading.weui-btn_warn .weui-loading{
background-image
:
url
(
"data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E"
);
}
@-webkit-keyframes weuiLoading{
0%
{
-webkit-transform:rotate
3
d(
0
,
0
,
1
,
0
deg);
transform:rotate
3
d(
0
,
0
,
1
,
0
deg);
}
100%
{
-webkit-transform:rotate
3
d(
0
,
0
,
1
,
360
deg);
transform:rotate
3
d(
0
,
0
,
1
,
360
deg);
}
}
@keyframes weuiLoading{
0%
{
-webkit-transform:rotate
3
d(
0
,
0
,
1
,
0
deg);
transform:rotate
3
d(
0
,
0
,
1
,
0
deg);
}
100%
{
-webkit-transform:rotate
3
d(
0
,
0
,
1
,
360
deg);
transform:rotate
3
d(
0
,
0
,
1
,
360
deg);
}
}
.weui-loadmore__tips {
display
: inline-
block
;
vertical-align
:
middle
;
color
: rgba(
0
,
0
,
0
,
0.9
);
color
: var(--weui-FG
-0
);
}