## Progress Use the Progress component to give feedback to the user about the status of a task with label, sections, etc. Category: Feedback ### Introduction ### Simple Example Progress component has one required prop: `value` - filled bar width in %. You can change bar color by passing `color` prop (by default theme.primaryColor will be used). ```python import dash_mantine_components as dmc component = dmc.Progress(value=26, color="pink") ``` ### Size `size` controls progress bar height. Progress has predefined sizes: xs, sm, etc. Alternatively, you can use a number to set height in px. ```python import dash_mantine_components as dmc dmc.Progress(size="sm") dmc.Progress(size=20) ``` ### Radius Radius controls border-radius of body and filled part. ```python import dash_mantine_components as dmc dmc.Progress(radius="lg") dmc.Progress(radius=10) ``` ### Multiple sections Multiple sections can be displayed instead of just one single bar. ```python import dash_mantine_components as dmc component = dmc.ProgressRoot( [ dmc.ProgressSection(dmc.ProgressLabel("Documents"), value=33, color="cyan"), dmc.ProgressSection(dmc.ProgressLabel("Photos"), value=28, color="pink"), dmc.ProgressSection(dmc.ProgressLabel("Others"), value=15, color="orange"), ], size="xl", ) ``` ### Vertical orientation ```python import dash_mantine_components as dmc component = dmc.Group([ dmc.Progress(value=80, orientation="vertical", h=200), dmc.Progress( value=60, color="orange", size="xl", orientation="vertical", h=200, animated=True ), dmc.ProgressRoot( size="xl", autoContrast=True, orientation="vertical", h=200, children=[ dmc.ProgressSection( value=40, color="lime.4", children=dmc.ProgressLabel("Documents") ), dmc.ProgressSection( value=20, color="yellow.4", children=dmc.ProgressLabel("Apps") ), dmc.ProgressSection( value=20, color="cyan.7", children=dmc.ProgressLabel("Other") ) ] ) ]) ``` ### With Tooltip Use the [Tooltip target](/components/tooltip#target) prop rather than using `ProgressSection` as Tooltip children. ```python import dash_mantine_components as dmc component = dmc.Box( [ dmc.ProgressRoot( [ dmc.ProgressSection( dmc.ProgressLabel("Documents"), value=33, color="cyan", id="progress-section1", ), dmc.ProgressSection( dmc.ProgressLabel("Photos"), value=28, color="pink", id="progress-section2", ), dmc.ProgressSection( dmc.ProgressLabel("Others"), value=15, color="orange", id="progress-section3", ), ], size="40", ), dmc.Tooltip( target="#progress-section1", label="Documents – 33Gb", ), dmc.Tooltip( target="#progress-section2", label="Photos – 28Gb", ), dmc.Tooltip( target="#progress-section3", label="Other – 15Gb", ), ] ) ``` ### With FloatingTooltip When using `FloatingTooltips` set `boxWrapperProps={'display': 'contents'}` for best results: ```python import dash_mantine_components as dmc component = dmc.ProgressRoot( [ dmc.FloatingTooltip( dmc.ProgressSection( dmc.ProgressLabel("Documents"), value=33, color="cyan", ), label="Documents – 33Gb", boxWrapperProps={"display": "contents"}, ), dmc.FloatingTooltip( dmc.ProgressSection( dmc.ProgressLabel("Photos"), value=28, color="pink", ), label="Photos – 28Gb", boxWrapperProps={"display": "contents"}, ), dmc.FloatingTooltip( dmc.ProgressSection( dmc.ProgressLabel("Other"), value=25, color="orange", ), label="Other – 15Gb", boxWrapperProps={"display": "contents"}, ), ], size=40, ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### Progress selectors | Selector | Static selector | Description | |----------|----------------|-------------| | root | `.mantine-Progress-root` | Root element | | section | `.mantine-Progress-section` | `Progress.Section` root element | | label | `.mantine-Progress-label` | `Progress.Label` root element | #### Progress CSS variables | Selector | Variable | Description | |----------|----------|-------------| | root | `--progress-radius` | Controls `border-radius` of track and sections | | root | `--progress-size` | Controls height of progress bar | | root | `--progress-transition-duration` | Controls width `transition-duration` of progress bar | #### Progress data attributes | Selector | Attribute | Condition | |----------|-----------|-----------| | section | `data-striped` | `striped` or `animated` props are set | | section | `data-animated` | `animated` prop is set | ### Keyword Arguments #### Progress - id (string; optional): Unique ID to identify this component in Dash callbacks. - animated (boolean; optional): Determines whether the sections stripes should be animated, if set, `striped` prop is ignored, `False` by default. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - autoContrast (boolean; optional): Determines whether label text color should depend on `background-color`. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors` or any valid CSS value, `theme.primaryColor` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - orientation (a value equal to: 'horizontal', 'vertical'; optional): Controls orientation default `'horizontal'`. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default. - size (number; optional): Controls track height, `'md'` by default. - striped (boolean; optional): Determines whether the section should have stipes, `False` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - transitionDuration (number; optional): Controls sections width transition duration, value is specified in ms, `100` by default. - value (number; required): Value of the progress. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`.