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
1. React mantine loader component.
import { Container, Loader } from "@mantine/core";
export default function App() {
return (
<>
<Container size="sm" mt={80}>
<Loader />
</Container>
</>
);
}
![mantine loader component.](https://frontendshape.com/wp-content/uploads/2024/05/YF7Y2sDi6YBHPDFmSSBqGtwpNV7sGwi0TE3aCF9G.png)
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>
</>
);
}
![mantine loading state with colors](https://frontendshape.com/wp-content/uploads/2024/05/i37TuoF8xIFtG05anAQN3Vxvq6lWwfUb5Qtz5Rie.png)
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>
</>
);
}
![loading state with size props](https://frontendshape.com/wp-content/uploads/2024/05/BhQfluqsi746EBTRtsnEyvxyUaeTARtXa6cmZJnz.png)
4. React mantine loader component with bar variant.
import { Container, Loader, Stack } from "@mantine/core";
export default function App() {
return (
<>
<Container size="sm" mt={80}>
<Stack>
<Loader variant="bars" />;
</Stack>
</Container>
</>
);
}
![loading state with bar variant](https://frontendshape.com/wp-content/uploads/2024/05/fBlk6Ot1bMqjRgnaRqRJIFQ4Y6lCjmG8kILS06pb.png)
5. React mantine loader component with dots variant.
import { Container, Loader, Stack } from "@mantine/core";
export default function App() {
return (
<>
<Container size="sm" mt={80}>
<Stack>
<Loader variant="dots" />;
</Stack>
</Container>
</>
);
}
![loading state with dots variant](https://frontendshape.com/wp-content/uploads/2024/05/ozMCzZFJSCkXnAD0MyjxC88BW06A93NYLkptr7HE.png)
Sources
- Indicate loading state (mantine.dev)