页面加载时需要加载，请求接口也需要loading。在前端loading的需求无处不在，就是为了让用户体验更好。
做loading的方式也有很多：
下面我处理loading的
用一张小的png图，用css3动画实现。
实现效果如下：
| .wgui-message{ position: fixed; top: 50%; left: 50%; z-index: 11010; box-sizing: border-box; padding: 10px; min-height: 120px; width: 120px; background-color: rgba(0,0,0,.5); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); border-radius: 5px; background-clip: padding-box; } .wgui-message__inner{ text-align: center; } .wgui-message_icon { display: inline-block; width: 50px; height: 50px; background-image: url(//wximg.qq.com/tmt/game/dist/img/modules/wui-message/[email protected]); background-size: 50px; -webkit-animation: loading 1s steps(12,end) infinite } .wgui-message_text { color: #fff; font-size: 14px; word-break: break-all; word-wrap: break-word; white-space: normal } @-webkit-keyframes loading { 0% { -webkit-transform: rotate3d(0,0,1,0deg) } to { -webkit-transform: rotate3d(0,0,1,1turn) } } @keyframes loading { 0% { -webkit-transform: rotate3d(0,0,1,0deg); } to { -webkit-transform: rotate3d(0,0,1,1turn); } } @keyframes loading { 0% { -webkit-transform: rotate3d(0,0,1,0deg); transform: rotate3d(0,0,1,0deg) } to { -webkit-transform: rotate3d(0,0,1,1turn); transform: rotate3d(0,0,1,1turn) } } |
| <div class="wgui-message"> <div class="wgui-message__inner"> <div class="wgui-message_icon"></div> <div class="wgui-message_text">加载中</div> </div> </div> |