这篇文章主要介绍“Vue加载中动画组件如何使用”，在日常操作中，相信很多人在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); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); 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; // 屏蔽鼠标事件}到此，关于“Vue加载中动画组件如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
