CircularProgress

Overview

CircularProgress is a widget that shows progress along a circle. Both determinate and indeterminate processes use CircularProgress to show progress, whether it gets done or not yet. Progress indicators help users understand ongoing processes, such as launching a module or uploading data by animating an indicator along an invisible circular track in a clockwise direction.

Please refer to this for more information: https://mui.com/material-ui/react-progress/#circular

Import

CODE

import { CircularProgress } 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 and Variant.
State	State: Normal	The State of the created Component.
Margin and Padding	Size Unit: Px	The component Margin and Padding with many selectable Size Units.
Size	Size Unit: Px Thickness: None	The component Size includes Size with many selectable Size Units, and Thickness.
Layout	Position: None Size Unit: Px	The component layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.
General	Visibility: none Opacity: 100%	The component General includes Visibility, Opacity, Color, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

<CircularProgress variant="determinate" value={25} />
      <CircularProgress variant="determinate" value={50} />
      <CircularProgress variant="determinate" value={75} />
      <CircularProgress variant="determinate" value={100} />