React MUI CircularProgress API

React MUI 是一个UI库，为React提供了预定义的强大且可定制的组件，以便更轻松地进行Web开发。MUI设计基于Google的Material Design。Material-UI是一个用户界面库，提供了预定义和可定制的React组件，以实现更快速和轻松的Web开发。这些Material-UI组件基于Google的Material Design。

本文将讨论 React MUI CircularProgressAPI 。Progress用于指示用户任务是否完成，或当前处于哪个阶段。

导入CircularProgress API：

import CircularProgress from '@mui/material/CircularProgress'

属性列表：

classes : 是用于覆盖或扩展应用于组件的样式。
value : 通过此属性显示圆形进度的值。
size : 用于指定组件的大小。
color : 用于指定组件的颜色。
disableShrink : 用于禁用收缩动画。
thickness : 用于指定圆圈的厚度。
sx : 用于向圆形进度添加自定义CSS样式。
variant : 用于选择不同的圆形进度变体。

CSS规则：

root (MuiDivider-root) : 应用于根元素的样式。
determinate (MuiCircularProgress-determinate) : 当圆形进度的变体为确定时应用样式。
indeterminate (MuiCircularProgress-indeterminate) : 当圆形进度的变体为不确定时应用样式。
colorPrimary (MuiCircularProgress-colorPrimary) : 当圆形进度的颜色为主要颜色时应用样式。
colorSecondary (MuiCircularProgress-colorSecondary) : 当圆形进度的颜色为次要颜色时应用样式。
svg (MuiCircularProgress-svg) : 应用样式到SVG元素。
circle (MuiCircularProgress-circle) : 应用样式到‘circle’ SVG路径。
circleDeterminate (MuiCircularProgress-circleDeterminate) : 当圆形进度的变体为确定时，应用样式到‘circle’ SVG路径。
circleIndeterminate (MuiCircularProgress-circleIndeterminate) : 当圆形进度的变体为不确定时，应用样式到‘circle’ SVG路径。

方法： 让我们创建一个React项目并安装React MUI模块。然后我们将创建一个展示React MUI CircularProgress API的UI。

创建React项目：

步骤1： 要创建一个React应用程序，您需要通过npx命令安装React模块。使用“npx”而不是“npm”是因为您只需要在应用程序的生命周期中使用该命令一次。

npx create-react-app project_name

步骤2： 在创建你的 React 项目之后，进入文件夹执行不同的操作。

cd project_name

步骤3： 在创建ReactJS应用程序后，使用以下命令安装所需的模块：

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/lab

项目结构 ：在执行上述步骤中提到的命令后，如果您在编辑器中打开项目，您可以看到类似下面所示的项目结构。新的组件用户创建或代码更改将在源文件夹中执行。

React MUI CircularProgress API

运行应用的步骤： 从项目的根目录中使用以下命令运行应用：

npm start

示例1: 我们正在创建一个UI，显示React MUI CircularProgress。

App.js

import React from 'react'; 
import CircularProgress from '@mui/material/CircularProgress'; 
  
export default function App() { 
    return ( 
        <div className="App" style= 
           {{ textAlign: "center" }}> 
            <h1 style={{ color: 'green' }}> 
               GeeksforGeeks 
            </h1> 
            <h3> 
               <u>React MUI CircularProgress API</u> 
            </h3> 
            <span> Success   <CircularProgress  
                color="success" /> 
            </span> 
            <span> Primary   <CircularProgress  
                color="primary" /> 
            </span> 
            <span> Secondary   <CircularProgress  
                color="secondary" /> 
            </span> 
            <span> Info   <CircularProgress  
                color="info" /> 
             </span> 
            <span> Error   <CircularProgress  
                color="error" /> 
             </span> 
            <span> Warning   <CircularProgress 
                color="warning" /> 
             </span> 
        </div> 
    ); 
}

输出 : 现在打开你的浏览器并访问http://localhost:3000/，你将看到以下输出：

React MUI CircularProgress API

示例2： 我们正在创建一个展示React MUI CircularProgress的UI。

App.js

import React from 'react'; 
import CircularProgress from '@mui/material/CircularProgress'; 
  
export default function App() { 
    return ( 
        <div className="App" style= 
             {{ textAlign: "center" }}> 
            <h1 style={{ color: 'green' }}> 
              GeeksforGeeks 
            </h1> 
            <h3><u>React MUI CircularProgress API</u></h3> 
            <CircularProgress variant="determinate"
               value={20} />    
            <CircularProgress variant="determinate" 
               value={50} />    
            <CircularProgress variant="determinate" 
               value={70} />    
            <CircularProgress variant="determinate"
               value={90} />    
            <CircularProgress variant="determinate"
               value={100} /> 
        </div> 
    ); 
}

输出： 现在打开你的浏览器，访问http://localhost:3000/，你将看到以下输出：

React MUI CircularProgress API