Progress greater than 100%

Question

I want to use an antd Progress to show user calories. And sometimes the user can eat more than he should and the Progress should be greater than 100% and red(failed). It is possible with antd Progress ?

Answer 1

Unfortunately, the Progress Component will check the percent props first, only 0 < percent < 100 is permit, you can find the check function in ant-design's code:

const validProgress = (progress: number | undefined) => {
    if (!progress || progress < 0) {
        return 0;
    } else if (progress > 100) {
        return 100;
    }
    return progress;
};