@gfazioli/mantine-spinner

Installation

yarn add @gfazioli/mantine-spinner

npm install @gfazioli/mantine-spinner

After installation import package styles at the root of your application:

import '@gfazioli/mantine-spinner/styles.css';

You can import styles within a layer @layer mantine-spinner by importing @gfazioli/mantine-spinner/styles.layer.css file.

import '@gfazioli/mantine-spinner/styles.layer.css';

Usage

The Spinner component allows you to create a spinner effect.

import { Spinner } from "@gfazioli/mantine-spinner";

function Demo() {
  return <Spinner  />;
}

Styled

Of course, you can style the spinner as you like. For example, by adding an additional animation effect on the whole spinner.

import { Spinner } from "@gfazioli/mantine-spinner";
import classes from './Spinner.module.css';

function Demo() {
  return (
    <Group align="center" justify="center" gap={100}>
      <Spinner className={classes.pulse} />
      <Spinner className={classes.rotate} />
    </Group>
  );
}

Random

Random spinner effect. Use it to create a loading effect.

<Spinner size={undefined} inner={undefined} segments={undefined} thickness={undefined} speed={undefined} color="undefined" />