React MUI进度反馈

React MUI 是一个UI库，提供了完整的组件，将我们自己的设计系统引入到我们的可生产组件中。MUI是一个用户界面库，提供预定义和可定制化的React组件，用于更快速和轻松的Web开发，这些MUI组件基于谷歌的Material Design。

在本文中，我们将讨论 React MUI进度反馈 。进度组件用于显示指示器，例如表示未指定的等待时间或显示过程的长度。

进度变体：

循环进度： 在此变体中，进度反馈以循环形式显示。它由循环不确定、循环颜色、循环确定、交互集成和带标签的循环组成。
线性进度： 在此变体中，进度反馈以线性形式显示。它由循环不确定、循环颜色、循环确定、线性缓冲区和带标签的循环组成。

非标准范围： 进度反馈仅接受0-100范围的值，但如果我们想添加一个超出范围的自定义值，我们也可以指定。

自定义： 进度反馈组件可以通过自定义样式进行定制。这包括更改大小、厚度、位置和动画值。

限制： 当进行重负载的CPU负荷、高频率更新等操作时，存在不正确的动画等限制。

API： 进度反馈组件中使用<CircularProgress />和<LinearProgress />。

语法：

<CircularProgress />
<LinearProgress />

创建React项目：

步骤1： 要创建一个React应用程序，通过npm命令安装React模块。

npm create-react-app project name

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

cd project name

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

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

项目结构：

React MUI进度反馈

运行应用程序的步骤： 打开终端并输入以下命令。

npm start

示例1： 以下示例演示了React MUI圆形进度反馈。

import { CircularProgress } from "@mui/material"; 
import * as React from "react"; 
import { useState } from "react"; 
import { useEffect } from "react"; 
  
function App() { 
    const [progressValue, setProgressValue] = useState(0); 
  
    useEffect(() => { 
        const time = setInterval(() => { 
            setProgressValue((beforeProgress) => 
                (beforeProgress >= 100 ? 0 : beforeProgress + 15)); 
        }, 800); 
  
        return () => { 
            clearInterval(time); 
        }; 
    }, []); 
  
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: "green" }}> 
                    GeeksforGeeks 
                </h1> 
                <h2>React MUI Progress Feedback</h2> 
            </div> 
            <div> 
                <CircularProgress 
                    color="success"
                    variant="indeterminate"
                /> 
                <CircularProgress 
                    variant="determinate"
                    color="primary"
                    value={progressValue} 
                /> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出：

React MUI进度反馈

示例2： 下面的示例演示了React MUI线性进展反馈。

import { LinearProgress } from "@mui/material"; 
import * as React from "react"; 
import { useState } from "react"; 
import { useEffect } from "react"; 
  
function App() { 
    const [progressValue, setProgressValue] = useState(10); 
  
    useEffect(() => { 
        const time = setInterval(() => { 
            setProgressValue((beforeProgress) => 
                (beforeProgress >= 100 ? 0 : beforeProgress + 15)); 
        }, 500); 
  
        return () => { 
            clearInterval(time); 
        }; 
    }, []); 
  
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: "green" }}> 
                    GeeksforGeeks 
                </h1> 
                <h2>React MUI Progress Feedback</h2> 
            </div> 
            <div> 
                <LinearProgress 
                    variant="determinate"
                    color="error"
                    value={progressValue} 
                /> 
            </div> 
        </center> 
    ); 
} 
  
export default App;