New Loading Spinner Component

[henriemategui]

A component that indicates interface loading would be interesting, I know Skeleton already exists, but that's not what I'm talking about. It's something like a spinner.

I know this isn't a big deal and it doesn't take much work for me to do myself, but I like shadcn/ui's design patterns and I would love it to have that.

An example:

[ZeldOcarina]

Agreed, this seems to be something missing!

[im-py-dev]

Agreed!

[benjick]

From here: https://github.com/shadcn-ui/taxonomy/blob/651f984e52edd65d40ccd55e299c1baeea3ff017/components/user-auth-form.tsx#L111

export const LoadingSpinner = ({className}) => {
  <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={cn("animate-spin", className)}
    >
      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
    </svg>
}

[benyamynbrkyc]

Simple and lightweight, love it

[eeshankeni]

perfect

[manoelduran]

nice!

[onurhan1337]

@benjick is shared a good example. I improved a bit and add type-safety and flexibility.

export interface ISVGProps extends React.SVGProps<SVGSVGElement> {
  size?: number;
  className?: string;
}

export const LoadingSpinner = ({
  size = 24,
  className,
  ...props
}: ISVGProps) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      {...props}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={cn("animate-spin", className)}
    >
      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
    </svg>
  );
};

[fizasayyed]

Works like a charm, thanks a lot!

[anoldwebsite]

@benjick is shared a good example. I improved a bit and add type-safety and flexibility.

export interface ISVGProps extends React.SVGProps<SVGSVGElement> {
  size?: number;
  className?: string;
}

export const LoadingSpinner = ({
  size = 24,
  className,
  ...props
}: ISVGProps) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      {...props}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={cn("animate-spin", className)}
    >
      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
    </svg>
  );
};

Your code has typescript errors. Cannot find name 'cn'.ts(2304)

[onurhan1337]

@anoldwebsite dude, this error is not related to me. If shadcn/ui is installed in your project, you should have cn or cx file. Even if not, you can add it manually, it just can't find the relevant function because there is no file with that name in your file path, not an error.

[alexander-densley]

@anoldwebsite import { cn } from '@/lib/utils'
add this line to the top of the file and it will work

[alexander-densley]

if its a properly set up shadcn project this should resolve the issue

[briskteq-faiz]

how can i use this loadingspinner

[onurhan1337]

Paste the code block I shared above into a file. Afterwards, you can use LoadingSpinner wherever you want by typing . Don't forget to import { LoadingSpinner } from 'your-file-name.tsx in the file you want to use beforehand.

[briskteq-faiz]

thanks a lot !

[simovicaleksa]

take a look at lucide-react package. it is as simple as:

import { LoaderIcon } from "lucide-react"

<LoaderIcon className="animate-spin" />

[simovicaleksa]

How is it not animated? Both mine and @onurhan1337's use SVG (just an icon) that is spinning using the animate-spin tailwindcss utility...

[austinm911]

I probably forgot the class name actually. Removing the comment

[briskteq-faiz]

I went with the same way i used loader-2 and actually made a small component for loader itself.

import { cn } from '@/lib/utils';
import { Loader2 } from 'lucide-react';

const Loader = ({ className }: { className?: string }) => {
  return (
    <Loader2
      className={cn('my-28 h-16 w-16 text-primary/60 animate-spin', className)}
    />
  );
};

export default Loader;

[HallexCosta]

But by installing the lucide-react, you charge the project with dependencies and components that will not be used or only the spinner component?

[lavisar]

Since we have lucide-react included with shadcn, this is the way I think when writing a loading spinner component

import { LoaderCircle, LucideProps } from 'lucide-react';

import { cn } from '@/lib/utils';

export interface IProps extends LucideProps {
  className?: string;
}

export const LoadingSpinner = ({ className, ...props }: IProps) => {
  return <LoaderCircle className={cn('animate-spin', className)} {...props} />;
};

[crvargasu]

Spinner doesnt move for me. Someone know the solution?

Im using next and rendering like this:

return (
    <LoadingSpinner className="animate-spin" />
    )

And component definition is this:

import { cn } from "src/lib/utils"

export interface ISVGProps extends React.SVGProps<SVGSVGElement> {
    size?: number;
    className?: string;
  }
  
export const LoadingSpinner = ({
  className,
  size = 24,
  ...props
}: ISVGProps) => {
  return (
    <svg
      height={size}
      width={size}
      xmlns="http://www.w3.org/2000/svg"
      {...props}
      className={cn("animate-spin", className)}
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      viewBox="0 0 24 24"
    >
      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
    </svg>
  );
};

[simovicaleksa]

Are you using tailwindcss?

[xavieroyj]

Did you find a solution? I've been facing the same issue

[flixlix]

@crvargasu is missing animation and keyframes in their tailwind config

[flixlix]

created it here

#3554

[mazewinther]

To anybody who came here for the common loading spinner, you see on a lot of websites, here it is:

• JavaScript: components/ui/loading-spinner.jsx

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

const spinnerVariants =
  "w-16 h-16 border-4 border-t-4 border-gray-200 border-t-gray-600 rounded-full animate-spin";

const LoadingSpinner = React.forwardRef((props, ref) => {
  const { className, ...rest } = props;
  return <div ref={ref} className={cn(spinnerVariants, className)} {...rest} />;
});

LoadingSpinner.displayName = "LoadingSpinner";

export { LoadingSpinner };

The code is consistent with the other Shadcn UI components.

• TypeScript: components/ui/loading-spinner.tsx

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

const spinnerVariants =
  "w-16 h-16 border-4 border-t-4 border-gray-200 border-t-gray-600 rounded-full animate-spin";

interface LoadingSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
}

const LoadingSpinner = React.forwardRef<HTMLDivElement, LoadingSpinnerProps>((props, ref) => {
  const { className, ...rest } = props;
  return <div ref={ref} className={cn(spinnerVariants, className)} {...rest} />;
});

LoadingSpinner.displayName = "LoadingSpinner";

export { LoadingSpinner };

You can use it anywhere in your app like this:

<LoadingSpinner />

It looks like this:

[kyr0]

And here goes the variant that works and combines lucide icons with Shadcn code conventions:

import * as React from "react";
import { cn } from "@/lib/utils";
import { LoaderIcon } from "lucide-react";

const spinnerVariants = "w-16 h-16 rounded-full animate-spin";

interface LoadingSpinnerProps extends React.HTMLAttributes<SVGSVGElement> {
  className?: string;
}

const LoadingSpinner = React.forwardRef<SVGSVGElement, LoadingSpinnerProps>(
  (props, ref) => {
    const { className, ...rest } = props;
    return (
      <LoaderIcon
        ref={ref}
        className={cn(spinnerVariants, className)}
        {...rest}
      />
    );
  },
);

LoadingSpinner.displayName = "LoadingSpinner";

export { LoadingSpinner };

[arthurjd]

Based on @mazewinther code published here.

• TypeScript: components/ui/loading-spinner.tsx

'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

// Define the spinner styles as a constant for better readability and maintainability
const spinnerStyles = 'border-4 border-t-4 rounded-full animate-spin'

// Define the default colors for the spinner
const defaultSpinnerColors = {
  border: 'gray-200',
  borderTop: 'gray-900',
  size: 'w-16 h-16',
}

interface LoadingSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string
  borderColor?: string
  borderTopColor?: string
  size?: number | string
}

/**
 * A simple loading spinner component.
 *
 * @param props - The props for the component.
 * @returns The loading spinner element.
 */
const LoadingSpinner = React.forwardRef<HTMLDivElement, LoadingSpinnerProps>(
  (props, ref) => {
    const { className, borderColor, borderTopColor, size, ...rest } = props

    const borderStyle = cn(
      `${spinnerStyles} border-${borderColor || defaultSpinnerColors.border} border-t-${
        borderTopColor || defaultSpinnerColors.borderTop
      }`,
    )

    const sizeStyle = size ? `h-${size} w-${size}` : defaultSpinnerColors.size

    return (
      <div className={cn(sizeStyle, className)} ref={ref} {...rest}>
        <div className={cn(borderStyle, sizeStyle)} />
      </div>
    )
  },
)

LoadingSpinner.displayName = 'LoadingSpinner'

export { LoadingSpinner }

You can use it anywhere in your app like this:

<LoadingSpinner borderColor="gray-200"  borderTopColor="gray-600"  size={4}/>

[justindmyers]

Unless I'm mistaken, you shouldn't be creating tailwind classnames dynamically.

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

border-${borderColor} || border-t-${borderTopColor || defaultSpinnerColors.borderTop}

This will cause the border styles to not be generated in the output CSS.

[florish-lacy]

Correct, the styles will not be generated at build time so these will break when the values change

[HallexCosta]

I like using the combo tailwind + vector icons with iconify for example "fluent:spinner-ios-16-filled", "gg:spinner-alt" and "ph:spinner".
Initially with three variants that can be controlled using the props from component and allowing to extend tailwind class

Usage:

<Spinner className="w-4 h-4 mr-2" type="circle-bars" />
<Spinner className="w-4 h-4 mr-2" type="shaft-long-rounded" />
<Spinner className="w-4 h-4 mr-2" type="shaft-short-rounded" />

Preview

[hczs]

Can u give me the Spinner source code? Thanks

[HallexCosta]

Can u give me the Spinner source code? Thanks

Hello, I'm on a trip, I tried to respond as soon as possible when I get back

[HallexCosta]

ui/loading-spinner.tsx

import * as React from 'react'

import { cn } from '@/lib/utils'

export interface LoadingSpinnerProps
  extends React.InputHTMLAttributes<HTMLDivElement> {
  type?: 'short' | 'long' | 'bars'
}

const spinners = {
  long: (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
      <path
        fill="currentColor"
        d="M2.501 8a5.5 5.5 0 1 1 5.5 5.5A.75.75 0 0 0 8 15a7 7 0 1 0-7-7a.75.75 0 0 0 1.501 0"
      />
    </svg>
  ),
  short: (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={24}
      height={24}
      viewBox="0 0 24 24"
    >
      <path
        fill="currentColor"
        d="M2 12C2 6.477 6.477 2 12 2v3a7 7 0 0 0-7 7z"
      />
    </svg>
  ),
  bars: (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
      <path
        fill="currentColor"
        d="M136 32v32a8 8 0 0 1-16 0V32a8 8 0 0 1 16 0m37.25 58.75a8 8 0 0 0 5.66-2.35l22.63-22.62a8 8 0 0 0-11.32-11.32L167.6 77.09a8 8 0 0 0 5.65 13.66M224 120h-32a8 8 0 0 0 0 16h32a8 8 0 0 0 0-16m-45.09 47.6a8 8 0 0 0-11.31 11.31l22.62 22.63a8 8 0 0 0 11.32-11.32ZM128 184a8 8 0 0 0-8 8v32a8 8 0 0 0 16 0v-32a8 8 0 0 0-8-8m-50.91-16.4l-22.63 22.62a8 8 0 0 0 11.32 11.32l22.62-22.63a8 8 0 0 0-11.31-11.31M72 128a8 8 0 0 0-8-8H32a8 8 0 0 0 0 16h32a8 8 0 0 0 8-8m-6.22-73.54a8 8 0 0 0-11.32 11.32L77.09 88.4A8 8 0 0 0 88.4 77.09Z"
      />
    </svg>
  )
}
const LoadingSpinner = React.forwardRef<HTMLDivElement, LoadingSpinnerProps>(
  ({ className, type, ...props }, ref) => {
    return (
      <div
        data-testid="spinner"
        className={cn(
          'h-4 w-4 text-[color:var(--primary)] animate-spin flex items-center justify-center animate-spin',
          className
        )}
        ref={ref}
        {...props}
      >
        {spinners[type ?? 'long']}
      </div>
    )
  }
)
LoadingSpinner.displayName = 'LoadingSpinner'

export { LoadingSpinner }

How to usage

const SignInButton = () => (
  <Button name="sign-in">
     <LoadingSpinner
        type="long"
        className="mr-2 h-4 w-4 animate-spin"
      />
    Sign In with Email
   </Button>
 )

The Button component belong to shadcn/ui components, then you can create a new component loading-spinner.tsx together to easily use in another components

[hczs]

Thank you very, very, very much!

[dulapahv]

I've created one similar to the example shared by @henriemategui in the initial discussion.

components/spinner.tsx

/**
 * A loading spinner component that supports multiple variants and sizes.
 * @example
 * ```tsx
 * <Spinner variant="primary" size="lg" />
 * <Spinner size={32} />
 * ```
 */
import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';

import { cn } from '@/lib/utils';

const spinnerVariants = cva(
  'relative inline-block aspect-square transform-gpu',
  {
    variants: {
      variant: {
        default: '[&>div]:bg-foreground',
        primary: '[&>div]:bg-primary',
        secondary: '[&>div]:bg-secondary',
        destructive: '[&>div]:bg-destructive',
        muted: '[&>div]:bg-muted-foreground',
      },
      size: {
        sm: 'size-4',
        default: 'size-5',
        lg: 'size-8',
      },
    },
    defaultVariants: { variant: 'default', size: 'default' },
  },
);

export interface SpinnerProps
  extends React.HTMLAttributes<HTMLDivElement>,
    Omit<VariantProps<typeof spinnerVariants>, 'size'> {
  className?: string;
  size?: VariantProps<typeof spinnerVariants>['size'] | number;
}

const Spinner = ({ className, variant, size = 'default' }: SpinnerProps) => (
  <div
    role="status"
    aria-label="Loading"
    className={cn(
      typeof size === 'string'
        ? spinnerVariants({ variant, size })
        : spinnerVariants({ variant }),
      className,
    )}
    style={typeof size === 'number' ? { width: size, height: size } : undefined}
  >
    {Array.from({ length: 12 }).map((_, i) => (
      <div
        key={i}
        className="animate-spinner absolute left-[46.5%] top-[4.4%] h-[24%] w-[7%]
          origin-[center_190%] rounded-full opacity-[0.1] will-change-transform"
        style={{
          transform: `rotate(${i * 30}deg)`,
          animationDelay: `${(i * 0.083).toFixed(3)}s`,
        }}
        aria-hidden="true"
      />
    ))}
    <span className="sr-only">Loading...</span>
  </div>
);

export { Spinner, spinnerVariants };

globals.css (For Tailwind CSS 4.0 or newer)

@theme {
  --animate-spinner: spinner 1s linear infinite;

  @keyframes spinner {
    0% {
      opacity: 1;
    }
    10% {
      opacity: 0.7;
    }
    20% {
      opacity: 0.3;
    }
    35% {
      opacity: 0.2;
    }
    50% {
      opacity: 0.1;
    }
    75% {
      opacity: 0.05;
    }
    100% {
      opacity: 0;
    }
  }
}

tailwind.config.ts (For previous version of Tailwind CSS)

module.exports = {
  extend: {
    animation: {
      spinner: 'spinner 1s linear infinite',
    },
    keyframes: {
      spinner: {
        '0%': { opacity: '1' },
        '10%': { opacity: '0.7' },
        '20%': { opacity: '0.3' },
        '35%': { opacity: '0.2' },
        '50%': { opacity: '0.1' },
        '75%': { opacity: '0.05' },
        '100%': { opacity: '0' },
      },
    },
  },
}

Usage

<Spinner variant="primary" size="lg" />

or

<Spinner size={32} />

[Hopelezz]

I've added this to my project manually. Would be nice to see something more official.

[arycloud]

I'm looking to have spinner with messages like we have in AI chatbots... e.g when we submit a query, we got few messeges under Model's message bubble like:
Thinking....
Crafting a responce
etc..

How can we achieve that in react? i'm new to React.
Thank you!