Appearance

The ChunkProgressBar enables you to set its dimensions and to implement custom styling for its status indicator and label.

Setting the Dimensions

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

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

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

Customizing the Status Indicator

You can customize 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 React from 'react';
import ReactDOM from 'react-dom';
import { Form, Field, FormElement } from '@progress/kendo-react-form';
import { ChunkProgressBar } from '@progress/kendo-react-progressbars';
import { Input } from '@progress/kendo-react-inputs';
import { DropDownList } from '@progress/kendo-react-dropdowns';

const genders = ["Male", "Female", "Other"];
const DropDown = (fieldRenderProps) => {
    const { data, ...others } = fieldRenderProps;
    return (
        <DropDownList data={genders} defaultValue={genders[0]} {...others} />
    );
};

const App = () => {
    const chunks = 4;
    const emptyStyles = { background: 'pink' };
    const progressStyles = { background: 'lightgreen' };

    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
    return (
        <div>
            <Form
                onSubmit={handleSubmit}
                initialValues={{
                    gender: genders[0]
                }}
                render={(formRenderProps) => {
                  const formValues = formRenderProps.valueGetter('');
                  const completeness =  Object.keys(formValues).reduce((sum, currentVal) => sum + (!!formValues[currentVal] ? 1 : 0), 0);

                  return (
                    <FormElement>
                        <fieldset className={'k-form-fieldset'}>
                            <legend className={'k-form-legend'}>Profile Completeness: <span id="completed">{completeness * 25}%</span></legend>
                            <ChunkProgressBar
                                value={completeness * 25}
                                emptyStyle={emptyStyles}
                                progressStyle={progressStyles}
                                chunkCount={chunks}
                            />
                            <div className="mb-3">
                                <Field name={'firstName'} component={Input} label={'First name'} />
                            </div>
                            <div className="mb-3">
                                <Field name={'lastName'} component={Input} label={'Last name'}/>
                            </div>

                            <div className="mb-3">
                                <Field name={"gender"} component={DropDown} label={"Gender"} />
                            </div>
                            <div className="mb-3">
                                <Field name={"occupation"} component={Input} label={"Occupation"}/>
                            </div>
                        </fieldset>
                        <button
                            type={'submit'}
                            className="k-button"
                            disabled={!formRenderProps.allowSubmit}
                        >
                            Submit

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