用vue写的一个简单的加载模块 页面初始化使用的
<template>
<div class='map_loading_vue' :class='{hide:isOpacity}' v-show='isShow'>
<div class='title'>健坤地图设备管理</div>
<div class="loader" v-if='isShowLoader'>
<div class="text">Loading...</div>
<div class="horizontal">
<div class="circlesup">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="circlesdwn">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="vertical">
<div class="circlesup">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="circlesdwn">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
<div class='progressbar' :class='{ hide: isHidePage }'>
<div class='bar' :style='"width:calc("+complete+"% - 10px);"' >
<span class='completeV'>{{complete}}%</span>
</div>
</div>
<div class='welcomeTitle' :class='{show:isShowWelcome}'>
<span>欢迎使用</span>
</div>
</div>
</template>
<script>
export default {
props: {
complete: {
type: Number,
default: 75
},
init: {
type: Function,
default: ()=>{ }
}
},
watch: {
complete (v){
if( v >= 100 ){
setTimeout(()=>{
this.guodu();
},500)
// 如果进度完成度超过100了 那就判断为完成了
setTimeout(()=>{
this.completeEnd();
},3000)
}
}
},
data (){
return {
isOpacity: false,
isShow: true,
isShowLoader: true,
isHidePage: false,
isShowWelcome: false
}
},
mounted (){
},
methods: {
// 欢迎的过度动画
guodu (){
// 隐藏掉加载滚动粒子
this.isShowLoader = false;
// 将进度条向下滑动消失
this.isHidePage = true;
setTimeout(()=>{
// 将欢迎使用从下向上弹出
this.isShowWelcome = true;
},1000)
},
// 完成任务
completeEnd (){
// 渐渐隐藏自己
this.isOpacity = true;
setTimeout(()=>{
// 将自己隐藏掉
this.isShow = false;
this.init();
},950)
}
}
}
</script>
<style scoped>
.welcomeTitle.show {
top: 50%;
}
.welcomeTitle {
transition: top 0.75s;
position:absolute;
top: 130%;
left: 50%;
padding: 20px;
text-align: center;
width: 30%;
transform: translate(-50%,-50%);
font-size: 40px;
text-shadow: #13a3a5 1px 0 0, #13a3a5 0 1px 0, #13a3a5 -1px 0 0, #13a3a5 0 -1px 0;
border-radius: 8px;
}
.progressbar.hide {
animation: progressbarHide 1s;
animation-fill-mode: forwards;
}
@keyframes progressbarHide {
0%{ bottom: 10% }
30% { bottom: 15% }
100% { bottom: -30% };
}
.completeV {
font-size: 33px;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
top: 50%;
text-shadow: #13a3a5 1px 0 0,
#13a3a5 0 1px 0,
#13a3a5 -1px 0 0,
#13a3a5 0 -1px 0;
color: #ffffff;
z-index: 9;
}
.progressbar {
background: #ffffff;
width: 30%;
height: 60px;
border-radius: 8px;
left: 50%;
position:absolute;
transform: translateX(-50%);
bottom: 10%;
transition: bottom 0.75s;
}
.progressbar .bar {
background: #13a3a5;
width: calc(100% - 10px);
height: 60px;
border-radius: 8px;
transform: translate(5px,-12px);
transition: width 0.25s;
}
.progressbar .bar::before {
content: "";
background: #54cacc;
width: 100%;
height: 60px;
border-radius: 8px;
transform: translate(0px,7px);
position: absolute;
}
.progressbar .bar::after {
content: "";
background: #13a3a5;
width: 100%;
height: 60px;
border-radius: 8px;
position:absolute;
}
.title {
font-size: 33px;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
top: 15%;
text-shadow: #13a3a5 1px 0 0,
#13a3a5 0 1px 0,
#13a3a5 -1px 0 0,
#13a3a5 0 -1px 0;
}
.map_loading_vue.hide {
opacity: 0;
}
.map_loading_vue {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background: #403833;
font-family: 'Open Sans';
font-weight: 100;
color:#f2f2f2;
font-size:100%;
margin:0em;
padding:0em;
width:100%;
height:100%;
position:absolute;
top: 0;
z-index: 99999;
opacity: 1;
transition: all 1s;
}
/* Start the loader code, first, let's align it the center of screen */
.loader {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-mos-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align:center;
/* disable selection and cursor changes */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:default;
}
/* Text align it the center of screen and connect the looped animation for 2 seconds */
.text{
position: absolute;
left: -1.3em;
top: -1.7em;
-webkit-animation: text 2s infinite;
-moz-animation: text 2s infinite;
-moz-animation: text 2s infinite;
-ms-animation: text 2s infinite;
-o-animation: text 2s infinite;
animation: text 2s infinite;
}
/* Set for the first layer vertical position */
.vertical{
position:absolute;
top: -1.84em;
left: -0.4em;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
/* Set for the second layer horizontal position */
.horizontal{
position:absolute;
top:0em;
left:0em;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* The next two classes do mirror for animation */
.circlesup{
position:absolute;
top: -4.7em;
right: 12.1em;
}
.circlesdwn{
position:absolute;
top:2.5em;
right:-13.5em;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* Create a container for our circles, rotate it 45 degrees and set animation*/
.circle {
position: absolute;
width: 15em;
height: 15em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: orbit 2s infinite;
-moz-animation: orbit 2s infinite;
-moz-animation: orbit 2s infinite;
-ms-animation: orbit 2s infinite;
-o-animation: orbit 2s infinite;
animation: orbit 2s infinite;
z-index:5;
}
/* Style's of our circles */
.circle:after {
content: '';
position: absolute;
width: 2em;
height: 2em;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
background: #13A3A5; /* Pick a color 1*/
}
.circle:nth-child(2) {
-webkit-animation-delay: 100ms;
-moz-animation-delay: 100ms;
-ms-animation-delay: 100ms;
-o-animation-delay: 100ms;
animation-delay: 100ms;
z-index:4;
}
.circle:nth-child(2):after {
background: #56bebf; /* Pick a color 2*/
-webkit-transform: scale(0.8,0.8);
-moz-transform: scale(0.8,0.8);
-ms-transform: scale(0.8,0.8);
-o-transform: scale(0.8,0.8);
transform: scale(0.8,0.8);
}
.circle:nth-child(3) {
-webkit-animation-delay: 225ms;
-moz-animation-delay: 225ms;
-ms-animation-delay: 225ms;
-o-animation-delay: 225ms;
animation-delay: 225ms;
z-index:3;
}
.circle:nth-child(3):after {
background: #ffa489; /* Pick a color 3*/
-webkit-transform: scale(0.6,0.6);
-moz-transform: scale(0.6,0.6);
-ms-transform: scale(0.6,0.6);
-o-transform: scale(0.6,0.6);
transform: scale(0.6,0.6);
}
.circle:nth-child(4) {
-webkit-animation-delay: 350ms;
-moz-animation-delay: 350ms;
-ms-animation-delay: 350ms;
-o-animation-delay: 350ms;
animation-delay: 350ms;
z-index:2;
}
.circle:nth-child(4):after {
background: #ff6d37; /* Pick a color 4*/
-webkit-transform: scale(0.4,0.4);
-moz-transform: scale(0.4,0.4);
-ms-transform: scale(0.4,0.4);
-o-transform: scale(0.4,0.4);
transform: scale(0.4,0.4);
}
.circle:nth-child(5) {
-webkit-animation-delay: 475ms;
-moz-animation-delay: 475ms;
-ms-animation-delay: 475ms;
-o-animation-delay: 475ms;
animation-delay: 475ms;
z-index:1;
}
.circle:nth-child(5):after {
background: #DB2F00; /* Pick a color 5*/
-webkit-transform: scale(0.2,0.2);
-moz-transform: scale(0.2,0.2);
-ms-transform: scale(0.2,0.2);
-o-transform: scale(0.2,0.2);
transform: scale(0.2,0.2);
}
/* Animation keys */
@-webkit-keyframes orbit {
0% { -webkit-transform:rotate(45deg); }
5% { -webkit-transform:rotate(45deg);
-webkit-animation-timing-function: ease-out; }
70% { -webkit-transform:rotate(405deg);
-webkit-animation-timing-function: ease-in; }
100% { -webkit-transform:rotate(405deg); }
}
@-moz-keyframes orbit {
0% { -moz-transform:rotate(45deg); }
5% { -moz-transform:rotate(45deg);
-moz-animation-timing-function: ease-out; }
70% { -moz-transform:rotate(405deg);
-moz-animation-timing-function: ease-in; }
100% { -moz-transform:rotate(405deg); }
}
@-ms-keyframes orbit {
0% { -ms-transform:rotate(45deg); }
5% { -ms-transform:rotate(45deg);
-ms-animation-timing-function: ease-out; }
70% { -ms-transform:rotate(405deg);
-ms-animation-timing-function: ease-in; }
100% { -ms-transform:rotate(405deg); }
}
@-o-keyframes orbit {
0% { -o-transform:rotate(45deg); }
5% { -o-transform:rotate(45deg);
-o-animation-timing-function: ease-out; }
70% { -o-transform:rotate(405deg);
-o-animation-timing-function: ease-in; }
100% { -o-transform:rotate(405deg); }
}
@keyframes orbit {
0% { transform:rotate(45deg); }
5% { transform:rotate(45deg);
animation-timing-function: ease-out; }
70% { transform:rotate(405deg);
animation-timing-function: ease-in; }
100% { transform:rotate(405deg); }
}
@-webkit-keyframes text {
0% {-webkit-transform:scale(0.2,0.2);
-webkit-animation-timing-function: ease-out; }
40%,60%{ -webkit-transform:scale(1,1);
-webkit-animation-timing-function: ease-out; }
70%,100%{ -webkit-transform:scale(0.2,0.2); }
}
@-moz-keyframes text {
0% {-moz-transform:scale(0.2,0.2);
-moz-animation-timing-function: ease-out; }
50% { -moz-transform:scale(1,1);
-moz-animation-timing-function: ease-out; }
60% { -moz-transform:scale(1,1);
-moz-animation-timing-function: ease-out; }
100% { -moz-transform:scale(0.2,0.2); }
}
@-mos-keyframes text {
0% {-mos-transform:scale(0.2,0.2);
-mos-animation-timing-function: ease-out; }
50% { -mos-transform:scale(1,1);
-mos-animation-timing-function: ease-out; }
60% { -mos-transform:scale(1,1);
-mos-animation-timing-function: ease-out; }
100% { -mos-transform:scale(0.2,0.2); }
}
@-o-keyframes text {
0% { -o-transform:scale(0.2,0.2);
-o-animation-timing-function: ease-out; }
50% { -o-transform:scale(1,1);
-o-animation-timing-function: ease-out; }
60% { -o-transform:scale(1,1);
-o-animation-timing-function: ease-out; }
100% { -o-transform:scale(0.2,0.2); }
}
@keyframes text {
0% { transform:scale(0.2,0.2);
animation-timing-function: ease-out; }
50% { transform:scale(1,1);
animation-timing-function: ease-out; }
60% { transform:scale(1,1);
animation-timing-function: ease-out; }
100% { transform:scale(0.2,0.2); }
}
</style>
引入也很简单
<comp-maploading :complete='complete'></comp-maploading>
搞定！
浙公网安备 33010602011771号