React MUI Skeleton Feedback

React Material UI 是一个开源的React用户界面组件库，实现了Google的Material Design。它提供了一系列预先构建、可重用、响应式的组件，需要较少的编码，并且可立即用于生产实现。它包括精美设计的组件，可以根据用户的需求进行定制。

Skeleton Feedback 是Material UI提供的一个组件，用于预览或显示动画占位符，以显示在数据加载或响应准备好显示在用户屏幕上之前。它可以减少等待时间，并告知用户加载状态。

Skeleton Feedback变体： Skeleton Feedback组件支持四种形状变体：

text： 这是默认的骨架变体，表示在一个单行文本中加载预览。
circular： 这个加载预览是圆形的，其半径可以调整。
rectangular： 这个加载预览是矩形的。
rounded： 这个加载预览是矩形圆角的形状。使用border-radius可以轻松调整大小。

Skeleton Feedback动画： Skeleton Feedback组件支持三种动画类型：

pulsates： 这是加载预览状态的默认动画。
wave： 这是一个连续波浪形的动画。
disable： 这用于完全禁用Skeleton Feedback上的动画。

语法：

<Skeleton variant="rectangular" width={210} height={118} />

设置React.js应用程序：

步骤1： 使用以下命令创建一个React.js应用程序：

npx create-react-app foldername

步骤2： 在创建项目文件夹，即文件夹名称之后，使用以下命令进入该目录：

cd foldername

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

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

npm install @mui/icons-material

项目结构: 项目的结构将如下所示：

React MUI Skeleton Feedback

示例1: 在这个示例中，我们将使用Skeleton组件和“pulse”动画。

App.js: 将下面的代码写入App.js文件中，其中App是React提供的默认组件，代码是在其中编写的。

import React, { useState, useEffect } from "react"; 
import Skeleton from '@mui/material/Skeleton'; 
import Box from '@mui/material/Box'; 
  
const App = () => { 
  
    return ( 
        <div style={{ textAlign: "center", marginTop: "50px" }}> 
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1> 
            <h2>React MUI Skeleton Feedback</h2> 
            <Box sx={{ display: 'flex', justifyContent: 'center' }}> 
                <Skeleton variant="rectangular"
                    animation={"pulse"} width={500} 
                    height={250} /> 
            </Box> 
        </div> 
    ); 
}; 
  
export default App;

运行程序的步骤： 要运行应用程序，请在项目的根目录执行以下命令：

npm start

输出：

你的Web应用程序将在“http://localhost:3000”上运行。现在，您将看到以下输出：
React MUI Skeleton Feedback

示例2： 在这个示例中，我们将使用骨架组件，具有“波浪”动画和“文本”变体。

App.js： 在App.js文件中编写下面的代码，其中App是我们在其中编写代码的默认组件，由React提供。

import React, { useState, useEffect } from "react"; 
import Skeleton from '@mui/material/Skeleton'; 
import Box from '@mui/material/Box'; 
import Typography from '@mui/material/Typography'; 
  
const App = () => { 
  
    return ( 
        <div style={{ textAlign: "center", marginTop: "50px" }}> 
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1> 
            <h3>React MUI Skeleton Feedback</h3> 
            <Box sx={{ justifyContent: 'center', display: 'flex' }}> 
                <Typography variant="h4"> 
                    <Skeleton animation="wave" variant="text"
                        width="300px" /> 
                </Typography> 
            </Box> 
        </div> 
    ); 
}; 
  
export default App;