30行js和30行css实现一个进度条组件，关键是使用css变量，如何使用css变量；预览图片代码JavascriptimportReactfrom'react';importPropTypesfrom'prop-types';importStylesfrom'./main.module.scss';/****传入百分比以生成进度条*@param{*}{percent}进度条进度控制*@bgColor{*}{percent}进度条背景色*@returnsjsx*/exportdefaultfunctionProgressBar({percent,bgColor}){if(percent<0||percent>100){console.error(newError('百分比值必须在0-100之间'));返回空值；}return();}ProgressBar.propTypes={percent:PropTypes.number,bgColor:PropTypes.string,};ProgressBar.defaultProps={percent:50,bgColor:'#2486ff',};CSS.progress{width:100%;高度：17px；边距：5px；颜色：#fff；背景色：#f1f1f1；font-size:12px;}.progress::before{counter-reset:percentvar(-百分）;/*文字显示*/content:counter(percent)"%";显示：内联块；/*广度计算*/width:calc(100%*var(--percent)/100);最大宽度：100%；身高：继承；文本对齐：右；背景色：var(--bgColor)；过渡：宽度2s；动画：进度1秒向前缓动；}@keyframes进度{来自{宽度：0;}到{宽度：calc(100%*var(--percent)/100);}}
