30行js和30行css实现一个进度条组件,关键在于运用css变量
,如何使用css变量
预览图
代码
Javascript
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
import React from 'react';
import PropTypes from 'prop-types';
import Styles from './main.module.scss';
/**
*
* 传入percent,生成进度条
* @param {*} { percent } 进度条进度控制
* @bgColor {*} { percent } 进度条背景颜色
* @returns jsx
*/
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
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
.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;
}
@keyframes progress {
from {
width: 0;
}
to {
width: calc(100% * var(--percent) / 100);
}
}