css预加载

来源:转载

1、预备素材:

2、html元素:

<div class="mask-loading" id="js-mask-loading" style=""> <div class="new-loading"> 请稍侯.. </div> <!-- <div class="css-loading"><p></p></div> --></div>
3、css样式:

.mask-loading { width: 100%; min-height: 100%; text-align: center; top: 0; bottom: 0; position: fixed; opacity: 0.8; z-index: 100;}.new-loading { width: 3rem; height: 3.6rem; box-sizing: border-box; background: rgba(0, 0, 0, 0.6); overflow: hidden; border-radius: 5px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); padding-top: 2.7rem; line-height: 0.9rem; text-align: center; color: #fff; font-size: 0.6rem;}.new-loading:before { position: absolute; display: block; content: ""; width: 100%; height: 2.7rem; left: 0; top: 0; background: url() no-repeat center center; background-size: 100%; animation: load 1s linear infinite; -webkit-animation: load 1s linear infinite;}@keyframes load { 0%{ transform:rotate(0deg); } 50%{ transform:rotate(180deg); } 100%{ transform:rotate(360deg); }}@-webkit-keyframes load{ 0%{ transform:rotate(0deg); } 50%{ transform:rotate(180deg); } 100%{ transform:rotate(360deg); }}
4、相应的加载完成以后,隐藏该元素,适当的时候增加模板背景。

分享给朋友:
您可能感兴趣的文章:
随机阅读: