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

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

[Olivier-OG]

You forgot your return statement, the components returns void right now.

[onurhan1337]

Thanks for the feedback, it's fixed.

[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 !

[Aleksa1312]

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

import { LoaderIcon } from "lucide-react"

<LoaderIcon className="animate-spin" />

[Aleksa1312]

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;

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

[Aleksa1312]

Are you using tailwindcss?

[flixlix]

created it here

#3554