118 lines
2.1 KiB
Vue
118 lines
2.1 KiB
Vue
<template>
|
|
<view class="chart-loading">
|
|
<view class="loading-container">
|
|
<!-- 加载动画图标 -->
|
|
<view class="loading-icon">
|
|
<view class="loading-dot dot1"></view>
|
|
<view class="loading-dot dot2"></view>
|
|
<view class="loading-dot dot3"></view>
|
|
</view>
|
|
<!-- 加载文字 -->
|
|
<view class="loading-text">{{ text }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ChartLoading',
|
|
props: {
|
|
// 加载文字
|
|
text: {
|
|
type: String,
|
|
default: '数据加载中...'
|
|
},
|
|
// 加载图标大小
|
|
size: {
|
|
type: String,
|
|
default: 'medium' // small, medium, large
|
|
},
|
|
// 背景是否透明
|
|
transparent: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.chart-loading {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #fff;
|
|
border-radius: 8rpx;
|
|
min-height: 300rpx;
|
|
|
|
&.transparent {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.loading-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.loading-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8rpx;
|
|
|
|
&.small {
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
&.large {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
|
|
.loading-dot {
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(45deg, #46B8F3, #1A4AF6);
|
|
animation: loading-bounce 1.4s ease-in-out infinite both;
|
|
|
|
&.dot1 {
|
|
animation-delay: -0.32s;
|
|
}
|
|
|
|
&.dot2 {
|
|
animation-delay: -0.16s;
|
|
}
|
|
|
|
&.dot3 {
|
|
animation-delay: 0;
|
|
}
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
@keyframes loading-bounce {
|
|
|
|
0%,
|
|
80%,
|
|
100% {
|
|
transform: scale(0);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
40% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style> |