Vue加载中动画组件使用方法详解 Vue加载中动画组件使用方法详

【Vue加载中动画组件使用方法详解】本文实例为大家分享了Vue加载中动画组件的使用，供大家参考，具体内容如下
（模仿ant-design加载中样式）效果图如下：

文章图片

①创建Loading.vue组件：

.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; }}

②在要使用的页面引用：

import Loading from '@/components/Loading'components: {Loading}.m-area {margin: 0 auto; width: 500px; height: 400px; background: #FFFFFF; }.loading { // 加载过程背景虚化background: #fafafa; pointer-events: none; // 屏蔽鼠标事件}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。