97 lines
2.0 KiB
Vue
97 lines
2.0 KiB
Vue
<template lang="html">
|
|
<div class="public-loading" v-if="loading">
|
|
<div class="public-loading-block">
|
|
<div class="public-loading-block-loader"></div>
|
|
<div class="public-loading-block-img">
|
|
<svg-icon icon-class="loading"></svg-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'loading',
|
|
components: { },
|
|
data: () => ({
|
|
loading: false
|
|
}),
|
|
methods: {
|
|
start() {
|
|
this.loading = true
|
|
},
|
|
finish() {
|
|
this.loading = false
|
|
},
|
|
getLoadingState(){
|
|
return this.loading
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.public-loading-block-loader {
|
|
display: block;
|
|
border: .04rem solid rgba(252,228,199,.3);
|
|
border-radius: 50%;
|
|
width: 1.28rem;
|
|
height: 1.28rem;
|
|
box-sizing: border-box;
|
|
-webkit-animation: spin 2s linear infinite;
|
|
animation: spin 2s linear infinite;
|
|
&:after{
|
|
content: '';
|
|
display: block;
|
|
width: .12rem;
|
|
height:.12rem;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
background-color: #F5A23D ;
|
|
margin-top: .22rem;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes spin {
|
|
0% { -webkit-transform: rotate(0deg); }
|
|
100% { -webkit-transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
.public-loading{
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
height: 100%;
|
|
align-items: center;
|
|
background-color: #292727;
|
|
position: fixed;
|
|
z-index: 100;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
&-block{
|
|
/*margin-top: -100%;*/
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
&-block-img{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.svg-icon{
|
|
width: .76rem;
|
|
height: .76rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|