背景

image.png

  1. <view class="cu-load bg-blue" :class="!isLoad?'loading':'over'"></view>

加载状态

image.png
image.png

<view class="cu-load bg-grey" :class="!isLoad?'loading':'over'"></view>

加载错误

image.png

弹框加载

image.png

        <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>

进度条加载

image.png

        <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>

            LoadProgress(e) {
                this.loadProgress = this.loadProgress + 3;
                if (this.loadProgress < 100) {
                    setTimeout(() => {
                        this.LoadProgress();
                    }, 100)
                } else {
                    this.loadProgress = 0;
                }
            }