Vue加载中动画组件使用方法详解
作者：theMuseCatcher
这篇文章主要为大家详细介绍了Vue加载中动画组件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue加载中动画组件的使用，供大家参考，具体内容如下
（模仿ant-design加载中样式）效果图如下：
①创建Loading.vue组件：
<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 { // 单个圆点样式
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; // 屏蔽鼠标事件
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。