@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

Note: The Spinner component renders only on the client side to avoid hydration mismatches in SSR (Server-Side Rendering) environments. This is necessary because the SVG coordinates are calculated with floating-point math, which can differ between server and client. If you use SSR, the spinner will appear only after the client has mounted.

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" />