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>
    </>
  );
}

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>
    </>
  );
}

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>
    </>
  );
}

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>
    </>
  );
}

Sources

Indicate loading state (mantine.dev)