DEV Community

Cover image for How to Use loading state in React with Mantine
Aaronn
Aaronn

Posted on • Originally published at frontendshape.com

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

  1. React mantine loader component.
import { Container, Loader } from "@mantine/core";

export default function App() {
  return (
    <>
      <Container size="sm" mt={80}>
        <Loader />
      </Container>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

mantine  loader component.
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>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

mantine loading state with colors
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>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

loading state with size props
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>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

loading state with bar variant
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>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

loading state with dots variant
Sources

Indicate loading state (mantine.dev)

Top comments (0)