Label

You can configure the visibility, position of the label as well as customizing the label which indicates the status of the task progress in the ProgressBar.

Getting Started

To customize the label position and visibility in the ProgressBar, use the labelVisible and labelPlacement properties.

import { Checkbox } from '@progress/kendo-react-inputs';
import { DropDownList } from '@progress/kendo-react-dropdowns';
const App = () => {
    const value = 50;
    const [visible, setVisible] = React.useState(true);

    const positions = ["start", "center", "end"];
    const [position, setPosition] = React.useState("start");

    const handleClick = (e) => {
        setVisible(e.target.checked);
    };

    const handleChange = (e) => {
        setPosition(e.target.value);
    }

    return (
        <div className="container">
            <div className="row mb-4">
                <div className="col-sm">
                    <DropDownList
                        data={positions}
                        value={position}
                        onChange={handleChange}
                        style={{width: 180}}
                    />
                </div>
                <div className="col-sm">
                    <strong>Result:</strong>
                </div>

            </div>
            <div className="row">
                 <div className="col-sm">
                    <Checkbox
                        id="visibility"
                        checked={visible}
                        onClick={handleClick}
                        label="Toggle the label visibility"
                        labelPlacement="before"
                    />
                </div>
                <div className="col-sm">
                    <ProgressBar value={value} labelVisible={visible} labelPlacement={position}/>
                </div>
            </div>
        </div>
    );
};

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Setting Custom Format

You can set a custom text or change the formatting by setting the label property.

const App = () => {
    const { value, start, stop, reset } = useInterval(0, 50);

    return (
        <div>
            <div className="text-center">
                <button className="k-button k-primary" onClick={start}>start</button>
                <button className="k-button" onClick={stop}>stop</button>
                <button className="k-button k-button" onClick={reset}>reset</button>
            </div>
            <br />
            <div className="text-center">
                <ProgressBar
                value={value}
                label={props => {
                    return <strong>{props.value}% Loading</strong>;
                }}
            />
            </div>
        </div>
    );
};

function useInterval(initialValue, ms) {
    const [value, setValue] = React.useState(initialValue);
    const intervalRef = React.useRef(null);
    let val = 0;

    const start = React.useCallback(() => {
        if (intervalRef.current !== null) {
            return;
        }

        intervalRef.current = setInterval(() => {
            if (val < 100) {
                setValue(v => v + 1);
                val = val + 1;
            }
        }, ms);
    }, []);
    const stop = React.useCallback(() => {
        if (intervalRef.current === null) {
            return;
        }
        clearInterval(intervalRef.current);
        intervalRef.current = null;
    }, []);
    const reset = React.useCallback(() => {
        setValue(0);
        val = 0;
    }, []);
    return { value, start, stop, reset };
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);