Appearance

The ProgressBar enables you to set its height and width and to implement custom styling for its status indicator and label.

Setting the Dimensions

To set the styling of the ProgressBar wrapper element, use the respective CSS properties.

const App = () => {
    return (
        <ProgressBar
            value={50}
            style={{width: 600}}
        />
    );
};

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

Customizing the Label and Status Indicator

You can customize the label and the bar that indicates the task progress by setting custom styling or custom classes to the inner elements that are responsible for their rendering. To define the custom layout, use the progressStyle and progressClassName options for the completed part and emptyStyle and emptyClassName options for the empty part.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { ProgressBar } from '@progress/kendo-react-progressbars';
import { Form, Field, FormElement } from '@progress/kendo-react-form';
import { Input } from '@progress/kendo-react-inputs';

const App = () => {
    const [value, setValue] = React.useState(0);
    const [customText, setCustomText] = React.useState('Empty');
    const [emptyStyles, setEmptyStyles] = React.useState({ color: '', background: '' });
    const [progressStyles, setProgressStyles] = React.useState({ background: '' });
    const max = 9;
    const elementRef = React.useRef();

    const handleInputChange = (e) => {
        if (e.target.value.length <= 9) {
            setValue(e.target.value.length);
        }

        switch (e.target.value.length) {
            case 0:
                updateAppearance('Empty', '', '', '');
                break;
            case 1:
                updateAppearance('Weak', 'red', '#ee9f05', '#ff000014');
                break;
            case 5:
                updateAppearance('Good', '#428bca', '#428bca', '#428bca1f');
                break;
            case 9:
                updateAppearance('Strong', '#8EBC00', '#8EBC00', '#8ebc0021');
                break;
            default:
        }
    };

    const updateAppearance = (text, textColor, progressBackground, emptyBackground) => {
        setCustomText(text);
        setEmptyStyles({ color: textColor, background: emptyBackground });
        setProgressStyles({ background: progressBackground });
    };

    const resetPassword = () => {
        setValue(0);
        setCustomText('Empty');
        setEmptyStyles({ color: '', background: '' });
        setProgressStyles({ background: '' });
        elementRef.current.value = '';
    };

    return (
        <Form
            className="k-list k-reset"
            onSubmit={(e) => e.preventDefault()}
            render={() => (
                <FormElement style={{ width: 300 }}>
                    <fieldset className={'k-form-fieldset'}>
                        <div className="mb-4">
                            <label className="d-block">New password</label>
                            <Field
                                name="password"
                                component={Input}
                                type="password"
                                ref={elementRef}
                                onChange={handleInputChange}
                                style={{ width: '100%' }}
                            />
                        </div>
                        <div className="mb-4">
                            <label className="d-block">Password strength</label>
                            <Field
                                name="password"
                                component={ProgressBar}
                                style={{ width: '100%' }}
                                emptyStyle={emptyStyles}
                                progressStyle={progressStyles}
                                label={customText}
                                max={max}
                                value={value}
                            />
                        </div>
                        <div>
                            <button onClick={resetPassword} className="k-button k-primary">Reset Password</button>
                        </div>
                    </fieldset>
                </FormElement>
            )} />
    );
};


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