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)