web前端入门到实战：30行JS和30行CSS代码实现一个进度条组件

最新推荐文章于 2025-03-07 20:26:45 发布

原创最新推荐文章于 2025-03-07 20:26:45 发布 · 426 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #JavaScript #前端 #web前端 #前端开发

30行js和30行css实现一个进度条组件，关键在于运用css变量，如何使用css变量

预览图

代码

Javascript

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',
};
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

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;
}
@keyframes progress {
    from {
        width: 0;
    }

    to {
        width: calc(100% * var(--percent) / 100);
    }
}
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）