@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 enables the creation of a captivating spinner effect, which enhances the visual dynamics of a user interface. This effect can be used to draw attention, indicate loading processes, or provide an interactive experience that engages users effectively. By implementing this spinner effect, developers can improve the overall aesthetic appeal and functionality of their applications, ensuring a more seamless and enjoyable user experience.

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>
  );
}

Example: Random

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

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