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

最新推荐文章于 2024-06-12 20:30:00 发布

six66667

最新推荐文章于 2024-06-12 20:30:00 发布

阅读量1.2k

点赞数

文章标签： react 进度条 antd

本文链接：https://blog.csdn.net/six66667/article/details/133930318

版权

本文介绍了如何在React中模仿antd Progress组件，创建一个可自定义颜色且带有滑块的直角矩形进度条。文章强调了这种设计的特殊性，并提供了实现代码和相关样式。

摘要由CSDN通过智能技术生成

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

很歹毒的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>   
        )
    }
}

使用：