CSS | 组件之loading动画适配屏幕尺寸

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

加载中
 
 

loading.gif 图

我们可以根据自己的项目需求，对代码做一些简单的改造就可以使用了。