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

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

import Nerv from "nervjs";
import { View } from '@tarojs/components';
import { Component } from "@tarojs/taro-h5";
import { BG_COLOR_LIST, SIZE } from "../utils/model";
export default class ClProgress extends 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={`cu-progress ${shapeClassName()} ${sizeClassName()} ${stripeClassName()} ${animationClassName()}`}>
        <View className={`${bgColorClassName()}`} style={{ width: `${this.props.percent}%` }}></View>
      </View>;
  }
}
ClProgress.options = {
  addGlobalClass: true
};
ClProgress.defaultProps = {
  shape: 'normal',
  bgColor: 'blue',
  size: 'normal',
  stripe: false,
  animation: false,
  percent: 0
};