在需要设置加载的元素加上 class 类名 cu-load，可以设置自己喜欢的背景颜色 .bg-red|...

加载状态 loading 正在加载中，over 加载完成，erro 加载失败

css

.cu-load loading  加载中
.cu-load over     加载结束
.cu-load erro     加载错误
.cu-load loading load-cuIcon  只有加载图标没有文字

因此 loading、over、erro，可以动态设置配合使用

加载的文案，是固定的，如需设置，复制 main.css 里的样式在当前文件改动即可

演示代码

<!-- 动态设置加载状态 -->
<view class="cu-load bg-grey" :class="!isLoad?'loading':'over'"></view>
<!-- 加载错误 -->
<view class="cu-load bg-red erro"></view>
<!-- 预览框，可以看到自定义顶部导航栏右侧有加载转动 -->
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">加载</block>
    <block slot="right">
        <view class="action">
            <view class="cu-load load-cuIcon" :class="!isLoad?'loading':'over'"></view>
        </view>
    </block>
</cu-custom>

弹窗加载

父容器加上 class 类名 cu-load load-modal，且用变量控制弹窗的显示与隐藏，父容器里面的内容，既是弹窗中间的内容

可以在弹窗里面放文字、带颜色的图标、静态图片等

演示代码

<view class="cu-load load-modal" v-if="loadModal">
    <!-- <view class="cuIcon-emojifill text-orange"></view> -->
    <image src="/static/logo.png" mode="aspectFit"></image>
    <view class="gray-text">加载中...</view>
</view>

进度条加载

父容器加上 class 类名 load-progress show|hide，动态变量控制 class show 和 hide，动态 style 设置距离顶部的高度 top: 高度px

容器里第一个就是加载的进度条，需要加上 class load-progress-bar bg-green|...，通过动态 style，控制进度

容器里第二个就是右侧的加载圆圈，需要加上 class load-progress-spinner text-green|...

演示代码

<view class="cu-bar bg-white margin-top">
    <view class="action">
        <text class="cuIcon-title text-blue"></text>进度条加载
    </view>
    <view class="action">
        <button class="cu-btn bg-green shadow" @tap="LoadProgress">
            点我
        </button>
    </view>
</view>
<view class="load-progress" :class="loadProgress!=0?'show':'hide'" :style="[{top:CustomBar+'px'}]">
    <view class="load-progress-bar bg-green" :style="[{transform: 'translate3d(-' + (100-loadProgress) + '%, 0px, 0px)'}]"></view>
    <view class="load-progress-spinner text-green"></view>
</view>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				loadProgress: 0
			};
		},
		methods: {
			LoadProgress(e) {
				this.loadProgress = this.loadProgress + 3;
				if (this.loadProgress < 100) {
					setTimeout(() => {
						this.LoadProgress();
					}, 100)
				} else {
					this.loadProgress = 0;
				}
			}
		}
	}
</script>