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

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

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

实现：

class RankProgress extends React.Component {
    render() {
        const { percent, progressColor } = this.props;
        return (
            

                

                    

                        

                        

                    
                
                   
            
   
        )
    }
}

使用：

样式（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;
        }
    }
}