A simple progress bar component that displays completion percentage.

Parameters:
NameTypeDescription
propsobject

Component props.

Properties
NameTypeDescription
customAttributesstring

Custom attributes for the component.

customClassesstring | Array | object

Custom CSS classes for the component.

labelstring

Custom label text (overrides percentage).

showLabelboolean

Whether to show the percentage label.

sizestring

Size variant of the progress bar. Options: 'small', 'regular', 'large'.

spacingstring | number | Array

The spacing for the component, as a string, number, array, or object.

stepModeboolean

Whether the progress bar is in step mode.

valuenumber

Current progress value (0-100).

Since
  • 5.7.3
Returns:

The progress bar component.

Type: 
JSX.Element
Example
import ProgressBar from '@gravityforms/components/react/admin/modules/ProgressBar/Simple';

return (
    <ProgressBar
        value={75}
        showLabel={true}
    />
);