React ChunkProgressBar

  • Visualize a task in progress through a predefined number of steps with this functional yet lightweight React Chunk ProgressBar component.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
  • Overview

    The KendoReact ChunkProgressBar component displays progress within your React applications broken down in to chunks, or parts, representing an equal breakdown of the total progress.

    See React ChunkProgressBar Overview demo

    React ChunkProgressBar - Overview, KendoReact UI Library
  • Value and Ranges

    By default, the KendoReact ChunkProgressBar represents values from 0 to 100. For scenarios where this may not work, the min and max properties can be used to set a defined range of new values.

    See React ChunkProgressBar Value and Ranges demo

    React ChunkProgressBar - Value and Ranges, KendoReact UI Library
  • Disabling ChunkProgressBar

    When added to a page, the KendoReact ChunkProgressBar is fully interactable out of the box. For scenarios that may require users to be unable to interact with the component until certain criteria are met, the React ChunkProgressBar can toggle between enabled and disabled with a single configuration option.

    See React ChunkProgressBar Disabling demo

    React ChunkProgressBar - Disabling ChunkProgressBar, KendoReact UI Library
  • Orientation

    The KendoReact ChunkProgressBar component can be rendered in both horizontal and vertical orientations.

    See React ChunkProgressBar Orientation demo

    React ChunkProgressBar - Orientation, KendoReact UI Library
  • Direction

    By default, the KendoReact ChunkProgressBar shows progress by filling itself from left to right. If one needs to fill the component from right to left instead, the reverse property can be used.

    See React ChunkProgressBar Direction demo

    React ChunkProgressBar - Direction, KendoReact UI Library
  • Appearance

    The React ChunkProgressBar has default styling associated with the applied KendoReact theme. When styling needs to be updated, the KendoReact ChunkProgressBar can be configured to change its default height or width, as well as customize the appearance of empty or filled chunks to help the component conform to any design requirements.

    See React ChunkProgressBar Appearance demo

    React ChunkProgressBar - Appearance, KendoReact UI Library
  • Globalization

    Thanks to the ability to be rendered in Right-to-Left modes, the KendoReact ChunkProgressBar supports many globalization scenarios.

    See React ChunkProgressBar Globalization demo

    React ChunkProgressBar - Globalization, KendoReact UI Library

All KendoReact Components

waves bg

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.