DEV Community

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

Posted on β€’ Originally published at frontendshape.com

1

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)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more