本文实例为大家分享了Vue加载中动画组件的使用,供大家参考,具体内容如下 (模仿ant-design加载中样式)效果图如下: ①创建Loading.vue组件: <templ
本文实例为大家分享了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; // 屏蔽鼠标事件
}
--结束END--
本文标题: Vue加载中动画组件使用方法详解
本文链接: https://www.lsjlt.com/news/141324.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0