因为项目中涉及加载海量点和线,uniapp提供的map组件满足不了需求,只能使用web-view链接本地html页面。
请求和渲染的时候有段空白,不能让它空着,用户还以为死了呢,然后其他页面用的是uni.showLoading(),为了保持风格统一,仿写了与uni.showLoading外形类似的页面加载效果。
效果图如下:
因为不想放一个gif动画占空间,参考了用纯CSS实现加载中动画效果,链接放在了文后。
下面是loading.css文件代码:
.loading-icon {
opacity: 0.75;
width: 24px;
height: 24px;
-webkit-animation: clockwise 500ms linear infinite;
animation: clockwise 500ms linear infinite;
}
/* The idea of animating inner circle is based on Polymer loading indicator by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */
.loading-cut {
position: relative;
width: 12px;
height: 24px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.loading-donut {
box-sizing: border-box;
width: 24px;
height: 24px;
border: 2px solid #fff;
border-radius: 50%;
border-left-color: transparent;
border-bottom-color: transparent;
position: absolute;
top: 0;
left: 0;
background: none;
margin: 0;
-webkit-animation: donut-rotate 1000ms cubic-bezier(.4, 0, .22, 1) infinite;
animation: donut-rotate 1000ms cubic-bezier(.4, 0, .22, 1) infinite;
}
@-webkit-keyframes clockwise {
0% {
-webkit-transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg)
}
}
@keyframes clockwise {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
@-webkit-keyframes donut-rotate {
0% {
-webkit-transform: rotate(0)
}
50% {
-webkit-transform: rotate(-140deg)
}
100% {
-webkit-transform: rotate(0)
}
}
@keyframes donut-rotate {
0% {
transform: rotate(0)
}
50% {
transform: rotate(-140deg)
}
100% {
transform: rotate(0)
}
}
.mask {
display: block;
width: 100%;
height: 100%;
opacity: 0.4;
filter: alpha(opacity=40);
background: while;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
.loading {
display: block;
width: 140px;
height: 110px;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
padding: 20px 10px 10px 50px;
text-align: center;
line-height: 27px;
position: absolute;
z-index: 2001;
color: #FFFFFF;
border-radius: 10%;
background-color:#000000;
opacity: 0.7;
}
.loading-text {
text-align: center;
margin-left: -30px;
margin-top: 5px;
font-size: 16px;
}
下面是遮罩div和加载效果div,放在body的下一级就行:
<div id="mask" class="mask" style="display: none; "></div>
<div id="loading" class="loading" style="display: none; ">
<div class="loading-icon">
<div class="loading-cut">
<div class="loading-donut"></div>
</div>
</div>
<div id="loading-text" class="loading-text">加载中……</div>
</div>
控制显隐的js代码如下,放在需要的地方就可以了:
var loading = $("#mask,#loading");
//显示
loading.show();
//隐藏
loading.hide();
参考资源: