#loadingwrapper .loading-mask { background: rgba(0,0,0,0.2); position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; } #loadingwrapper .loading-box-s { position: fixed; top: 100px; left: 50%; z-index: 5000; width: 7.6em; min-height: 7.6em; margin-left: -3.8em; text-align: center; color: #fff; background: #080915; border-radius: 5px; box-shadow: 0px 0px 30px 1px #103136 inset; } #loadingwrapper .loader-cicle { position: relative; width: 50px; height: 50px; margin-top: 15px; margin-bottom: 15px; border-radius: 50%; display: inline-block; vertical-align: middle; border: 7px double #bd5837; -webkit-animation: ball-turn 1s linear infinite; animation: ball-turn 1s linear infinite; } #loadingwrapper .loading-text{ color: #c3c3c3; } #loadingwrapper .loader-cicle::before { content: ""; position: absolute; width: 10px; height: 10px; background: #bd5837; border-radius: 50%; bottom: 0; right: 30px; } #loadingwrapper .loader-cicle::after { content: ""; position: absolute; width: 10px; height: 10px; background: #bd5837; border-radius: 50%; left: 30px; top: 0; } @keyframes ball-turn { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
可用于手机端数据加载动画,带有遮罩层,因为使用css3属性,pc端低版本ie浏览器兼容可能会有问题。