react仿照antd progress实现可自定义颜色的直角矩形进度条

可传颜色、带滑块的直角进度条

很歹毒的UI设计（真的很丑）

实现：

class RankProgress extends React.Component {render() {const { percent, progressColor } = this.props;return (<div className={styles.progress}><div className="progress-outer"><div className="progress-border" style={{width: percent}}><div className="progress-placeholder"></div><div className="progress-inner" style={{backgroundColor: progressColor}}></div></div></div>                   </div>   )}
}

使用：

<RankProgress percent={percent} progressColor={progressColor} />

样式（less文件）

.progress {:global {.progress-outer {position: relative;display: inline-block;width: 400px;height: 10px;vertical-align: middle;background-color: #576487d0;margin-top: -10px; // 此为调整与文字行的间距}.progress-border {height: 14px;margin-top: -2px;border-right: 2px solid white;}.progress-placeholder {height: 2px;}.progress-inner {height: 10px;}}
}