element loading:
this.loadFun();
loadFun() {
self = this;
const loading = this.$loading({
lock: true,
text: "Loading...",
spinner: "loadingImg"
});
setTimeout(() => {
loading.close();
self.loading = false;
}, 2000);
},
<style>
.el-loading-mask {
background: url("../../assets/images/large/loadingbg.png") no-repeat center
center !important;
background-size: 100% 100%;
}
/* loading字体大小 */
.el-loading-spinner .el-loading-text {
font-size: 0.8rem;
color: white;
}
.loadingImg:before {
display: inline-block;
width: 4rem;
height: 4rem;
content: "";
background-size: 100% 100%;
background-image: url("../../assets/images/large/loadicon.gif");
}
</style>
手写mask:
<div v-show="loading" class="mask"> <div id="cssload-contain"> <div class="cssload-wrap" id="cssload-wrap1"> <div class="cssload-ball" id="cssload-ball1"></div> </div> <div class="cssload-wrap" id="cssload-wrap2"> <div class="cssload-ball" id="cssload-ball2"></div> </div> <div class="cssload-wrap" id="cssload-wrap3"> <div class="cssload-ball" id="cssload-ball3"></div> </div> <div class="cssload-wrap" id="cssload-wrap4"> <div class="cssload-ball" id="cssload-ball4"></div> </div> </div> </div> <style> .mask { width: 100vw; height: 100vh; background: url("../../assets/images/large/loadingbg.png") no-repeat center center !important; background-size: 100% 100%; } #cssload-contain { width: 3rem; height: 3rem; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; opacity: 0; animation: fadeIn 1.15s 1; -o-animation: fadeIn 1.15s 1; -ms-animation: fadeIn 1.15s 1; -webkit-animation: fadeIn 1.15s 1; -moz-animation: fadeIn 1.15s 1; animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; } .cssload-wrap { animation: translate 1150ms infinite ease-in-out alternate, zindex 2300ms infinite ease-in-out; -o-animation: translate 1150ms infinite ease-in-out alternate, zindex 2300ms infinite ease-in-out; -ms-animation: translate 1150ms infinite ease-in-out alternate, zindex 2300ms infinite ease-in-out; -webkit-animation: translate 1150ms infinite ease-in-out alternate, zindex 2300ms infinite ease-in-out; -moz-animation: translate 1150ms infinite ease-in-out alternate, zindex 2300ms infinite ease-in-out; position: absolute; } .cssload-ball { width: 49px; height: 49px; box-shadow: 0 -6.25px 0 rgba(0, 0, 0, 0.15) inset; background-color: rgb(227, 116, 107); border-radius: 50%; animation: scale 1150ms infinite ease-in-out alternate; -o-animation: scale 1150ms infinite ease-in-out alternate; -ms-animation: scale 1150ms infinite ease-in-out alternate; -webkit-animation: scale 1150ms infinite ease-in-out alternate; -moz-animation: scale 1150ms infinite ease-in-out alternate; animation-delay: -575ms; -o-animation-delay: -575ms; -ms-animation-delay: -575ms; -webkit-animation-delay: -575ms; -moz-animation-delay: -575ms; transform: scale(0.5); -o-transform: scale(0.5); -ms-transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); border: 2px solid black; } .cssload-ball:after { content: ""; width: 49px; height: 13px; background: rgb(238, 238, 238); position: absolute; top: 68px; border-radius: 50%; } #cssload-wrap2 { animation-delay: -1150ms; -o-animation-delay: -1150ms; -ms-animation-delay: -1150ms; -webkit-animation-delay: -1150ms; -moz-animation-delay: -1150ms; } #cssload-ball2 { background-color: rgb(57, 123, 249); animation-delay: -1725ms; -o-animation-delay: -1725ms; -ms-animation-delay: -1725ms; -webkit-animation-delay: -1725ms; -moz-animation-delay: -1725ms; } #cssload-wrap3 { animation-delay: -1725ms; -o-animation-delay: -1725ms; -ms-animation-delay: -1725ms; -webkit-animation-delay: -1725ms; -moz-animation-delay: -1725ms; } #cssload-ball3 { background-color: rgb(244, 180, 0); animation-delay: -2300ms; } #cssload-wrap4 { animation-delay: -2875ms; -o-animation-delay: -2875ms; -ms-animation-delay: -2875ms; -webkit-animation-delay: -2875ms; -moz-animation-delay: -2875ms; } #cssload-ball4 { background-color: rgb(15, 157, 88); animation-delay: -3450ms; -o-animation-delay: -3450ms; -ms-animation-delay: -3450ms; -webkit-animation-delay: -3450ms; -moz-animation-delay: -3450ms; } @keyframes translate { 100% { transform: translateX(97px); } } @-o-keyframes translate { 100% { -o-transform: translateX(97px); } } @-ms-keyframes translate { 100% { -ms-transform: translateX(97px); } } @-webkit-keyframes translate { 100% { -webkit-transform: translateX(97px); } } @-moz-keyframes translate { 100% { -moz-transform: translateX(97px); } } @keyframes scale { 100% { transform: scale(1); } } @-o-keyframes scale { 100% { -o-transform: scale(1); } } @-ms-keyframes scale { 100% { -ms-transform: scale(1); } } @-webkit-keyframes scale { 100% { -webkit-transform: scale(1); } } @-moz-keyframes scale { 100% { -moz-transform: scale(1); } } @keyframes zindex { 25% { z-index: 1; } 75% { z-index: -1; } } @-o-keyframes zindex { 25% { z-index: 1; } 75% { z-index: -1; } } @-ms-keyframes zindex { 25% { z-index: 1; } 75% { z-index: -1; } } @-webkit-keyframes zindex { 25% { z-index: 1; } 75% { z-index: -1; } } @-moz-keyframes zindex { 25% { z-index: 1; } 75% { z-index: -1; } } @keyframes fadeIn { 100% { opacity: 1; } } @-o-keyframes fadeIn { 100% { opacity: 1; } } @-ms-keyframes fadeIn { 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 100% { opacity: 1; } } @-moz-keyframes fadeIn { 100% { opacity: 1; } } </style>
完整代码:
动画地址:
CSS Load.net - Miscellaneous loaders in pure CSS and HTML
<template> <div> <div v-show="loading" class="mask"> <div id="cssload-contain"> <div class="cssload-wrap" id="cssload-wrap1"> <div class="cssload-ball" id="cssload-ball1"></div> </div> <div class="cssload-wrap" id="cssload-wrap2"> <div class="cssload-ball" id="cssload-ball2"></div> </div> <div class="cssload-wrap" id="cssload-wrap3"> <div class="cssload-ball" id="cssload-ball3"></div> </div> <div class="cssload-wrap" id="cssload-wrap4"> <div class="cssload-ball" id="cssload-ball4"></div> </div> </div> </div> <div class="container" v-show="!loading"> <div class="left-btn" @click="hiddenSide"> <img src="../../assets/images/large/leftbtn.png" alt /> </div> <div class="right-btn" @click="hiddenSide"> <img src="../../assets/images/large/rightbtn.png" alt /> </div> <div class="header"> <div class="top"> <Date /> </div> <div class="sec_top"> <div class="top-left"> <img :class="showSide ? 'show' : 'hiddWidth0'" src="../../assets/images/large/qjdc.png" alt /> </div> <div class="se_top"> <div class="nav" v-for="(item, index) in navTab" :key="index" :class="{ tabactive: activeTab == index }" @click="changeaTb(index)" > <div>{ { item }}</div> </div> </div> <div class="top-right" :class="showSide ? 'show' : 'hiddWidth0'"> <img src="../../assets/images/large/qyhx.png" alt /> </div> <div class="top-right-back"> <a href="http://localhost/#/publish/74?token=fSsdCh09Y2A%2BIUl%2Bxuf6tw%3D%3D" target="_self" > <img src="../../assets/images/large/back_1.png" alt /> </a> </div> </div> </div> <div class="content"> <!-- <div v-if="!isShow" class="model" style="width: 13rem; height: 100%; position: relative;">--> <div class="left" :class="showSide ? 'show' : 'hiddWidth0'"> <div style="margin-top: -0.625rem"> <div class="sec-img"> <img src="../../assets/images/large/zdxm.png" alt style="width:12.75rem" /> </div> </div> <div class="prototal"> <img src="../../assets/images/large/ptotal.png" alt /> <div> <div class="title">项目总数</div> <div class="tnum"> <countTo :startVal="0" :endVal="1098" :duration="3000" separator></countTo> </div> </div> <div> <div class="title">项目总投资额</div> <div class="num"> <span> <countTo :startVal="0" :endVal="457.12" :duration="3000" :decimals="2" separator></countTo> </span> <span class="unit">亿元</span> </div> </div> <div> <div class="title">累计到位投资</div> <div class="num"> <span> <countTo :startVal="0" :endVal="347.92" :duration="3000" :decimals="2"></countTo> </span> <span class="unit">亿元</span> </div> </div> </div> <chart-view style="height: 2.25rem; width: 12rem" :chart-option="barOptions" :auto-resize="true" height="100%" ></chart-view> <div class="sbjd"> <div class="sbshow" v-for="(item, index) in sjlist" :key="index"> <img :src="item.img" alt /> <div style="margin-left: 0.125rem"> <div class="title">{ { item.name }}</div> <div class="num"> <countTo :startVal="0" :endVal="item.num" :duration="3000" :style="{ color: item.color }" ></countTo> </div> </div> </div> </div> <div> <div class="sec-img"> <img src="../../assets/images/large/cyfz.jpg" alt style="height: 0.875rem;" /> </div> </div> <div> <div class="showBusiness"> <img src="../../assets/images/large/zdcyicon.png" alt /> <span>主导产业一总数</span> <countTo class="cy1" :startVal="0" :endVal="1403" :duration="3000" separator></countTo> <span>主导产业二总数</span> <countTo class="cy2" :startVal="0" :endVal="2303" :duration="3000" separator></countTo> </div> <chart-view style="height: 4.5rem; width: 11rem" :chart-option="chartOpt2" :auto-resize="true" height="100%" ref="lineCharts" ></chart-view> <!-- <div id="line" style="height: 4.5rem; width: 11rem" ref="lines"></div> --> </div> <div class="sec-titleImg" style="margin-left: 0.875rem"> <img src="../../assets/images/large/cyfz2.png" alt /> </div> <div class="sec-img"> <img src="../../assets/images/large/business.png" alt />