LinearProgress

Overview

LinearProgress is a type of graphical control that helps to visualize the progress of any work or operation. It shows the measure of progress of any task or activity linearly in order to give a user visual feedback while waiting for resources.

Please refer to this for more information: https://mui.com/material-ui/api/linear-progress/.

Import

CODE

import { LinearProgress } from '@mui/material';

The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.

Property

Property:

Name	Default	Description
Id-name	Placeholder: <id-name>	The Id-name of the created component.
Default Style	Color: None Variant: None	The Default Style of the created component includes Color, Variant.
State	State: Normal	The State of the created Component.
Margin	Size Unit: Px	The component Margin and Padding with many selectable Size Units.
Size	Size Unit: Px	The component Size includes Width and Height with many selectable Size Units.
Layout	Position: None Size Unit: Px	The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.
Value		The component Value includes Value.
General	Visibility: None Opacity: 100%	The component General includes Visibility and Opacity.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

<LinearProgress
          sx={{'width': '300px','height': '300px',
              ':active': {'margin': '15px 25px 25px 20px',
              'position': 'relative','top': '15px','right': '15px','bottom': '20px','left': '25px',
              'visibility': 'hidden',
              'opacity': 0.43,},}}
               variant="indeterminate"
               color="primary"
               value={Hello}/>