140 lines
3.3 KiB
Vue
140 lines
3.3 KiB
Vue
<template>
|
|
<div id="vue-loading" v-show="loadings.length">
|
|
<div class="filter" v-show="full"></div>
|
|
<div class="loader-wrap">
|
|
<!-- <div class="loader"></div> -->
|
|
<div class="logo">
|
|
<img src="@/assets/image/loding-logo.png" alt="">
|
|
</div>
|
|
<div class="hint">{{text}}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:'Loading',
|
|
data(){
|
|
return {
|
|
loadings:[],
|
|
text:'',
|
|
full:false, //是否展示蒙层
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="stylus" scoped>
|
|
#vue-loading
|
|
width 100%
|
|
height 100%
|
|
position absolute
|
|
left 0
|
|
top 0
|
|
z-index 999
|
|
.filter
|
|
width 100%
|
|
height 100%
|
|
background rgba(255,255,255,0.3);
|
|
.loader-wrap
|
|
position absolute
|
|
left 50%
|
|
top 50%
|
|
transform translate(-50%,-50%)
|
|
display flex
|
|
flex-direction column
|
|
justify-content center
|
|
.logo
|
|
// width 100%
|
|
text-align center
|
|
img
|
|
animation scal 0.8s infinite
|
|
opacity 0.8
|
|
width 16vw
|
|
.hint
|
|
margin-top 10px
|
|
font-size 14px
|
|
color #666
|
|
text-shadow 1px 1px 3px white
|
|
.loader
|
|
width 2.5em
|
|
height 2.5em
|
|
transform rotate(165deg)
|
|
position relative
|
|
&:before
|
|
animation before 2s infinite
|
|
&:after
|
|
animation after 2s infinite
|
|
&:before,
|
|
&:after
|
|
content ''
|
|
position absolute
|
|
top 50%
|
|
left 50%
|
|
display block
|
|
width 0.5em
|
|
height 0.5em
|
|
border-radius 0.25em
|
|
transform translate(-50%, -50%)
|
|
</style>
|
|
|
|
<style>
|
|
@keyframes scal {
|
|
0%{
|
|
transform:scale(0.8);
|
|
}
|
|
50%{
|
|
transform:scale(1);
|
|
}
|
|
100%{
|
|
transform:scale(0.8);
|
|
}
|
|
}
|
|
@keyframes before {
|
|
0% {
|
|
width: 0.5em;
|
|
box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
|
|
}
|
|
35% {
|
|
width: 2.5em;
|
|
box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
|
|
}
|
|
70% {
|
|
width: 0.5em;
|
|
box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
|
|
}
|
|
100% {
|
|
box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
|
|
}
|
|
}
|
|
@keyframes after {
|
|
0% {
|
|
height: 0.5em;
|
|
box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
|
|
}
|
|
35% {
|
|
height: 2.5em;
|
|
box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
|
|
}
|
|
70% {
|
|
height: 0.5em;
|
|
box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
|
|
}
|
|
100% {
|
|
box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
|
|
}
|
|
}
|
|
/**
|
|
* Attempt to center the whole thing!
|
|
*/
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
.loader {
|
|
position: absolute;
|
|
top: calc(50% - 1.25em);
|
|
left: calc(50% - 1.25em);
|
|
}
|
|
</style>
|
|
|