mp-colorui/dist/h5/components/loading/index.js

MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）

import Nerv from "nervjs";
import { Image, Text, View } from "@tarojs/components";
import Taro from "@tarojs/taro-h5";
import { BG_COLOR_LIST } from "../../lib/model";
import { classNames } from "../../lib/index";
import ClText from "../text/index";
export default class ClLoading extends Taro.Component {
  render() {
    const props = this.props;

    const [loadProgress, setLoadProgress] = Taro.useState(0);
    const loadProgressFn = () => {
      setLoadProgress(100);
    };
    const contentViewStyle = { position: props.content ? "relative" : "inherit" };
    const contentLoadingStyle = {
      display: props.show ? "flex" : "none",
      flexDirection: "column",
      position: props.content ? "absolute" : "fixed",
      width: props.content ? "100%" : "100vw",
      height: props.content ? "100%" : "100vh"
    };
    Taro.useEffect(() => {
      if (props.show) {
        loadProgressFn();
      }
    }, []);
    Taro.useEffect(() => {
      if (props.show) loadProgressFn();else {
        setLoadProgress(0);
      }
    }, [props.show]);
    const bgColorClassName = () => props.bgColor ? BG_COLOR_LIST[props.bgColor] : "bg-blue";
    const commonComponent = <View style={Object.assign(contentViewStyle)}>
      {this.props.children}
      <View className="cu-load load-image" style={Object.assign(contentLoadingStyle)} onClick={e => {
        e.stopPropagation();
      }}>
        <View style={{
          animationIterationCount: "infinite",
          animationTimingFunction: "linear",
          animationDuration: "0.5s",
          animationName: "rotate-0-360"
        }}>
          <Text className={classNames(["cuIcon-loading1", "text-white", "text-xxl"])} style={{
            fontSize: Taro.pxTransform(44)
          }} />
        </View>
        <ClText textColor={"white"} text={props.commonText} size={"xsmall"} />
      </View>
    </View>;
    const modalComponent = <View className="cu-load load-modal" onClick={e => {
      e.stopPropagation();
    }}>
      <Image src={props.imgUrl || ""} mode="aspectFit" />
      <Text className="text-gray">{props.modalText}</Text>
    </View>;
    const imageComponent = <View style={Object.assign(contentViewStyle)}>
      <View className="cu-load load-image" style={Object.assign(contentLoadingStyle)}>
        <Image src={props.imgUrl || ""} mode="widthFix" style={{
          width: props.imgWidth ? Taro.pxTransform(props.imgWidth) : ""
        }} />
      </View>
      {this.props.children}
    </View>;
    const lineComponent = <View className={`cu-load ${props.loadingError ? "bg-red erro" : bgColorClassName()} ${props.noMore || props.loadingError ? "over" : "loading"}`} />;
    const barComponent = <View style={Object.assign(contentViewStyle)}>
      <View className={classNames(`load-progress ${props.show ? "show" : "hide"}`, props.className)} style={Object.assign({ top: "0" }, contentLoadingStyle, props.style)}>
        <View className={`load-progress-bar ${bgColorClassName()}`} style={{
          transform: `translate3d(-${100 - loadProgress}%, 0px, 0px)`,
          transition: "all 5s ease 0s"
        }} />
        <View className={`load-progress-spinner text-${props.bgColor}`} />
      </View>
      {this.props.children}
    </View>;
    return props.content || props.show ? props.type === "bar" ? barComponent : props.type === "line" ? lineComponent : props.type === "modal" ? modalComponent : props.type === "image" ? imageComponent : commonComponent : <View />;
  }

}
ClLoading.options = {
  addGlobalClass: true
};
ClLoading.defaultProps = {
  type: "bar",
  bgColor: "blue",
  modalText: "加载中...",
  loadingError: false,
  noMore: false,
  show: false
};