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

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

import Nerv from "nervjs";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro-h5";
import { BG_COLOR_LIST, SIZE } from "../../lib/model";
import { classNames } from "../../lib/index";
export default class ClProgress extends Taro.Component {
  render() {
    const shapeClassName = () => this.props.shape ? this.props.shape === "normal" ? "" : this.props.shape : "";
    const bgColorClassName = () => this.props.bgColor ? BG_COLOR_LIST[this.props.bgColor] : "bg-blue";
    const sizeClassName = () => this.props.size ? SIZE[this.props.size] : "";
    const stripeClassName = () => this.props.stripe ? "striped" : "";
    const animationClassName = () => this.props.animation ? "active" : "";
    return <View className={classNames(`cu-progress ${shapeClassName()} ${sizeClassName()} ${stripeClassName()} ${animationClassName()}`, this.props.className)} style={Object.assign({}, this.props.style)}>
        <View className={`${bgColorClassName()}`} style={{ width: `${this.props.percent}%` }} />
      </View>;
  }
}
ClProgress.options = {
  addGlobalClass: true
};
ClProgress.defaultProps = {
  shape: "normal",
  bgColor: "blue",
  size: "normal",
  stripe: false,
  animation: false,
  percent: 0
};