2023-02-28 17:09:20 +08:00
|
|
|
import { RsProgressType } from './type'
|
2023-03-01 11:39:06 +08:00
|
|
|
import progressScss from './progress.module.scss'
|
2023-02-28 17:09:20 +08:00
|
|
|
|
|
|
|
const Progress = (props: RsProgressType) => {
|
|
|
|
|
|
|
|
return (
|
2023-03-01 11:39:06 +08:00
|
|
|
<div className={progressScss.progress}>
|
|
|
|
<div className='progress-pr' style={{ width: props.rateWidth ?? 250 }}>
|
2023-02-28 17:09:20 +08:00
|
|
|
<div
|
2023-03-01 11:39:06 +08:00
|
|
|
className='progress-rate'
|
2023-02-28 17:09:20 +08:00
|
|
|
style={{
|
|
|
|
width: (props.percent ?? 0) * ((props.rateWidth ?? 250) / 100),
|
|
|
|
backgroundColor: props.rateColor ?? 'blue',
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</div>
|
2023-03-01 11:39:06 +08:00
|
|
|
<span className='progress-num'>{props.percent > 100 ? 100 :(props.percent.toString().substring(0,4) ?? 0) }%</span>
|
2023-02-28 17:09:20 +08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Progress;
|