今天小编跟大家讲解下有关30行代码实现一个进度条组件 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关30行代码实现一个进度条组件 的相关资料，希望小伙伴们看了有所帮助。
30行js和30行css实现一个进度条组件，关键在于运用css变量。
预览图代码Javascriptimport react from 'react';import PropTypes from 'prop-types';import Styles from './main.module.scss';export default function ProgressBar({ percent, bgColor }) { if (percent < 0 || percent > 100) { console.error(new Error('percent value must between 0 - 100')); return null; } return ( <div className={Styles.progress} style={{ '--percent': percent, '--bgColor': bgColor }} /> );}ProgressBar.propTypes = { percent: PropTypes.number, bgColor: PropTypes.string,};ProgressBar.defaultProps = { percent: 50, bgColor: '#2486ff',};css.progress { width: 100%; height: 17px; margin: 5px; color: #fff; background-color: #f1f1f1; font-size: 12px;}.progress::before { counter-reset: percent var(--percent); content: counter(percent)"%"; display: inline-block; width: calc(100% * var(--percent) / 100); max-width: 100%; height: inherit; text-align: right; background-color: var(--bgColor); transition:width 2s; animation: progress 1s ease forwards;[email protected] progress { from { width: 0; } to { width: calc(100% * var(--percent) / 100); }}来源：爱蒂网
