How to Use loading state in React with Mantine

In this tutorial, we will see how to implement a loading state using React Mantine Core. We’ll cover loading bars and loading dots with React Mantine.

React Mantine Loader Example

React mantine loader component.

import { Container, Loader } from “@mantine/core“;

export default function App() {
return (
<>
<Container size=“sm” mt={80}>
<Loader />
</Container>
</>
);
}

2.React mantine loader component with colors.

import { Container, Loader, Stack } from “@mantine/core“;

export default function App() {
return (
<>
<Container size=“sm” mt={80}>
<Stack>
<Loader color=“cyan” />
<Loader color=“dark” />
<Loader color=“green” />
<Loader color=“red” />
<Loader color=“yellow” />
</Stack>
</Container>
</>
);
}

3.React mantine loader component with size props xs, sm, md, lg, xl.

import { Container, Loader, Stack } from “@mantine/core“;

export default function App() {
return (
<>
<Container size=“sm” mt={80}>
<Stack>
<Loader size=“xs” />
<Loader size=“sm” />
<Loader size=“md” />
<Loader size=“lg” />
<Loader size=“xl” />
</Stack>
</Container>
</>
);
}