loading组件
我们在做项目的过程中尤其是跳转页面和请求接口的时，经常需要对页面的跳转进行优化，让跳转页面和接口请求数据显得更加平滑，体验效果更好。所以loading组件就产生了。
此代码适配于屏幕尺寸大小，所以可以直接使用。总结代码如下：
CSS
#mark-bg {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
}
#mark-bg .container {
width: 30vw;
height: 30vw;
z-index: 1000;
display: inline-block;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
background: #000;
border-radius: 5vw;
opacity: 0.6;
transform: translate(-50%, -50%);
}
#mark-bg .loading-bg {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#mark-bg .loading-icon {
width: 10vw;
height: 10vw;
display: inline-block;
margin-top: -8vw;
}
#mark-bg .loading-tip {
display: inline-block;
font-size: 4vw;
color: #fff;
position: absolute;
bottom: 5vw;
}
HTML
<body>
<div id="mark-bg">
<div class="container">
<div class="loading-bg">
<img class="loading-icon" src="img/loading.gif" alt="">
<span class="loading-tip">加载中</span>
</div>
</div>
</div>
</body>
loading.gif 图
我们可以根据自己的项目需求，对代码做一些简单的改造就可以使用了。