In this tutorial, we will create loading skeleton in react with material ui (mui 5). We will see mui 5 loading skeleton with text circular rect angular rounded, loading skeleton card example with react material UI 5.
Install & Setup Vite + React + Typescript + MUI 5
React Material UI 5 Loading Skeleton Example
1. Create react mui 5 loading skeleton using react-mui Skeleton component with variant text, circular, rectangular, rounded.
import * as React from "react";
import Skeleton from "@mui/material/Skeleton";
import Stack from "@mui/material/Stack";
export default function Variants() {
return (
<Stack spacing={1}>
{/* For variant="text", adjust the height via font-size */}
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
{/* For other variants, adjust the size with `width` and `height` */}
<Skeleton variant="circular" width={40} height={40} />
<Skeleton variant="rectangular" width={210} height={60} />
<Skeleton variant="rounded" width={210} height={60} />
</Stack>
);
}
2. react mui 5 loading skeleton with animations.
import * as React from 'react';
import Skeleton from '@mui/material/Skeleton';
import { Box } from '@mui/material';
export default function Animations() {
return (
<Box sx={{ width: 300 }}>
<Skeleton />
<Skeleton animation="wave" />
<Skeleton animation={false} />
</Box>
);
}
3. react mui 5 YouTube media video loading skeleton.
import * as React from 'react';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import Skeleton from '@mui/material/Skeleton';
import { Box } from '@mui/material';
const data = [
{
src: 'https://i.ytimg.com/vi/pLqipJNItIo/hqdefault.jpg?sqp=-oaymwEYCNIBEHZIVfKriqkDCwgBFQAAiEIYAXAB&rs=AOn4CLBkklsyaw9FxDmMKapyBYCn9tbPNQ',
title: 'Don Diablo @ Tomorrowland Main Stage 2019 | Official…',
channel: 'Don Diablo',
views: '396k views',
createdAt: 'a week ago',
},
{
src: 'https://i.ytimg.com/vi/_Uu12zY01ts/hqdefault.jpg?sqp=-oaymwEZCPYBEIoBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLCpX6Jan2rxrCAZxJYDXppTP4MoQA',
title: 'Queen - Greatest Hits',
channel: 'Queen Official',
views: '40M views',
createdAt: '3 years ago',
},
{
src: 'https://i.ytimg.com/vi/kkLk2XWMBf8/hqdefault.jpg?sqp=-oaymwEYCNIBEHZIVfKriqkDCwgBFQAAiEIYAXAB&rs=AOn4CLB4GZTFu1Ju2EPPPXnhMZtFVvYBaw',
title: 'Calvin Harris, Sam Smith - Promises (Official Video)',
channel: 'Calvin Harris',
views: '130M views',
createdAt: '10 months ago',
},
];
interface MediaProps {
loading?: boolean;
}
function Media(props: MediaProps) {
const { loading = false } = props;
return (
<Grid container wrap="nowrap">
{(loading ? Array.from(new Array(3)) : data).map((item, index) => (
<Box key={index} sx={{ width: 210, marginRight: 0.5, my: 5 }}>
{item ? (
<img
style={{ width: 210, height: 118 }}
alt={item.title}
src={item.src}
/>
) : (
<Skeleton variant="rectangular" width={210} height={118} />
)}
{item ? (
<Box sx={{ pr: 2 }}>
<Typography gutterBottom variant="body2">
{item.title}
</Typography>
<Typography display="block" variant="caption" color="text.secondary">
{item.channel}
</Typography>
<Typography variant="caption" color="text.secondary">
{`${item.views} • ${item.createdAt}`}
</Typography>
</Box>
) : (
<Box sx={{ pt: 0.5 }}>
<Skeleton />
<Skeleton width="60%" />
</Box>
)}
</Box>
))}
</Grid>
);
}
export default function YouTube() {
return (
<Box sx={{ overflow: 'hidden' }}>
<Media loading />
<Media />
</Box>
);
}
4. react mui 5 loading skeleton with cards.
import * as React from "react";
import Card from "@mui/material/Card";
import CardHeader from "@mui/material/CardHeader";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import Avatar from "@mui/material/Avatar";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import Skeleton from "@mui/material/Skeleton";
import { Container } from "@mui/material";
interface MediaProps {
loading?: boolean;
}
function Media(props: MediaProps) {
const { loading = false } = props;
return (
<Card sx={{ maxWidth: 345, m: 2 }}>
<CardHeader
avatar={
loading ? (
<Skeleton
animation="wave"
variant="circular"
width={40}
height={40}
/>
) : (
<Avatar
alt="Ted talk"
src="https://pbs.twimg.com/profile_images/877631054525472768/Xp5FAPD5_reasonably_small.jpg"
/>
)
}
action={
loading ? null : (
<IconButton aria-label="settings">
<MoreVertIcon />
</IconButton>
)
}
title={
loading ? (
<Skeleton
animation="wave"
height={10}
width="80%"
style={{ marginBottom: 6 }}
/>
) : (
"Ted"
)
}
subheader={
loading ? (
<Skeleton animation="wave" height={10} width="40%" />
) : (
"5 hours ago"
)
}
/>
{loading ? (
<Skeleton sx={{ height: 190 }} animation="wave" variant="rectangular" />
) : (
<CardMedia
component="img"
height="140"
image="https://pi.tedcdn.com/r/talkstar-photos.s3.amazonaws.com/uploads/72bda89f-9bbf-4685-910a-2f151c4f3a8a/NicolaSturgeon_2019T-embed.jpg?w=512"
alt="Nicola Sturgeon on a TED talk stage"
/>
)}
<CardContent>
{loading ? (
<React.Fragment>
<Skeleton
animation="wave"
height={10}
style={{ marginBottom: 6 }}
/>
<Skeleton animation="wave" height={10} width="80%" />
</React.Fragment>
) : (
<Typography variant="body2" color="text.secondary" component="p">
{
"Why First Minister of Scotland Nicola Sturgeon thinks GDP is the wrong measure of a country's success:"
}
</Typography>
)}
</CardContent>
</Card>
);
}
export default function Facebook() {
return (
<Container maxWidth="md" sx={{ mt: 8 }}>
<Media loading />
<Media />
</Container>
);
}
5. react mui 5 loading skeleton with Typography.
import * as React from 'react';
import Typography, { TypographyProps } from '@mui/material/Typography';
import Skeleton from '@mui/material/Skeleton';
import Grid from '@mui/material/Grid';
const variants = [
'h1',
'h3',
'body1',
'caption',
] as readonly TypographyProps['variant'][];
function TypographyDemo(props: { loading?: boolean }) {
const { loading = false } = props;
return (
<div>
{variants.map((variant) => (
<Typography component="div" key={variant} variant={variant}>
{loading ? <Skeleton /> : variant}
</Typography>
))}
</div>
);
}
export default function SkeletonTypography() {
return (
<Grid container spacing={8}>
<Grid item xs>
<TypographyDemo loading />
</Grid>
<Grid item xs>
<TypographyDemo />
</Grid>
</Grid>
);
}
6. react mui 5 loading skeleton with image and avatar.
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import Avatar from '@mui/material/Avatar';
import Grid from '@mui/material/Grid';
import Skeleton from '@mui/material/Skeleton';
import { Box } from '@mui/material';
const Image = styled('img')({
width: '100%',
});
function SkeletonChildrenDemo(props: { loading?: boolean }) {
const { loading = false } = props;
return (
<div>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Box sx={{ margin: 1 }}>
{loading ? (
<Skeleton variant="circular">
<Avatar />
</Skeleton>
) : (
<Avatar src="https://pbs.twimg.com/profile_images/877631054525472768/Xp5FAPD5_reasonably_small.jpg" />
)}
</Box>
<Box sx={{ width: '100%' }}>
{loading ? (
<Skeleton width="100%">
<Typography>.</Typography>
</Skeleton>
) : (
<Typography>Ted</Typography>
)}
</Box>
</Box>
{loading ? (
<Skeleton variant="rectangular" width="100%">
<div style={{ paddingTop: '57%' }} />
</Skeleton>
) : (
<Image
src="https://pi.tedcdn.com/r/talkstar-photos.s3.amazonaws.com/uploads/72bda89f-9bbf-4685-910a-2f151c4f3a8a/NicolaSturgeon_2019T-embed.jpg?w=512"
alt=""
/>
)}
</div>
);
}
export default function SkeletonChildren() {
return (
<Grid container spacing={8}>
<Grid item xs>
<SkeletonChildrenDemo loading />
</Grid>
<Grid item xs>
<SkeletonChildrenDemo />
</Grid>
</Grid>
);
}
7. react mui 5 loading skeleton with black color.
import * as React from 'react';
import Skeleton from '@mui/material/Skeleton';
import { Box } from '@mui/material';
export default function SkeletonColor() {
return (
<Box
sx={{
bgcolor: '#121212',
p: 8,
width: '100%',
display: 'flex',
justifyContent: 'center',
}}
>
<Skeleton
sx={{ bgcolor: 'grey.900' }}
variant="rectangular"
width={210}
height={118}
/>
</Box>
);
}
Related Posts
create a chat ui in react with mui 5
create a blog section in react mui 5
create a footer in react mui 5
create a responsive navbar in react with mui 5
react mui 5 search bar example
react mui 5 login page example
react mui 5 image list example
react mui 5 toggle switch example
react mui 5 registration form example
react mui 5 contact us page example
react mui 5 gradient button example
react mui 5 social media icons example
react mui 5 snackbar toast notification example
how to use autocomplete react mui 5
dynamically multiple input fields in react mui 5
how to use dropdown menu in react mui 5
how to use background image in react mui 5
how to use pricing table in react mui 5
how to use dark mode in react mui 5
how to use file upload in react mui 5
how to use sticky navbar in react mui 5
how to use box shadow in react mui 5
how to use multi step form in react mui 5
how to use loading button in react mui 5