How to Use Loader in React Mantine

In this tutorial, we will see loading state in react mantine core. We will see loading bar, loading dots using react mantine.

Install & Setup Vite + React + Typescript + Mantine UI

How to Use Mantine in Next.JS 13

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

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

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

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

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

mantine loading state with dots variant