how to use loader in react mantine

How to Use Loader in React Mantine

updated 06/03/23 By frontendshape

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.

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

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

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

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

mantine loading state with dots variant