<template>
? <div class="m-spin-dot">
? ? <span class="u-dot-item"></span>
? ? <span class="u-dot-item"></span>
? ? <span class="u-dot-item"></span>
? ? <span class="u-dot-item"></span>
? </div>
</template>
<script>
export default {
? name: 'Loading'
}
</script>
<style lang="less" scoped>
.m-spin-dot {
? // 水平垂直居中
? position: relative;
? top: calc(50% - 18px);
? margin: 0 auto;
? width: 36px;
? height: 36px;
? transform: rotate(45deg);
? -ms-transform: rotate(45deg); /* Internet Explorer */
? -moz-transform: rotate(45deg); /* Firefox */
? -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
? -o-transform: rotate(45deg); /* Opera */
? animation: rotate 1.2s linear infinite;
? -webkit-animation: rotate 1.2s linear infinite;
? @keyframes rotate {
? ? 100% {transform: rotate(405deg);}
? }
? .u-dot-item { // 單個(gè)圓點(diǎn)樣式
? ? position: absolute;
? ? width: 10px;
? ? height: 10px;
? ? background: @mainColor;
? ? border-radius: 50%;
? ? opacity: .3;
? ? animation: spinMove 1s linear infinite alternate;
? ? -webkit-animation: spinMove 1s linear infinite alternate;
? ? @keyframes spinMove {
? ? ? 100% {opacity: 1;}
? ? }
? }
? .u-dot-item:first-child {
? ? top: 0;
? ? left: 0;
? }
? .u-dot-item:nth-child(2) {
? ? top: 0;
? ? right: 0;
? ? animation-delay: .4s;
? ? -webkit-animation-delay: .4s;
? }
? .u-dot-item:nth-child(3) {
? ? bottom: 0;
? ? right: 0;
? ? animation-delay: .8s;
? ? -webkit-animation-delay: .8s;
? }
? .u-dot-item:last-child {
? ? bottom: 0;
? ? left: 0;
? ? animation-delay: 1.2s;
? ? -webkit-animation-delay: 1.2s;
? }
}
</style>

import Loading from '@/components/Loading'
components: {
? ? Loading
}
<div :class="['m-area', {'loading': isLoading}]"
?? ?<Loading />
</div>
.m-area {
?? ?margin: 0 auto;
?? ?width: 500px;
?? ?height: 400px;
?? ?background: #FFFFFF;
}
.loading { // 加載過程背景虛化
?? ?background: #fafafa;
?? ?pointer-events: none; // 屏蔽鼠標(biāo)事件
}