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
- 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)
Top comments (0)