Loading

Categorystyled
ArchitectureReact Client Component
Dependencies

Usage 

import { DemoWrapper } from "@/demos/react/demoWrapper";
import { Loading } from "@/components/react/styled/loading";

export const LoadingDemo = ({ code }: { code: string }) => {
  return (
    <DemoWrapper code={code}>
      <Loading className="w-6 h-6" />
    </DemoWrapper>
  );
};

Install Instructions

Copy and paste the code into that file

import type { CSSProperties, ComponentPropsWithRef } from "react";
import { twMerge } from "tailwind-merge";

interface LoadingProps
  extends Omit<
    ComponentPropsWithRef<"svg">,
    "children" | "viewBox" | "fill" | "xmlns"
  > {
  stokeWidth?: number;
}

const calcStyle = ({ index }: { index: number }): CSSProperties => {
  const delay = 120;
  const totalItems = 8;

  const compiledStyles: CSSProperties = {
    animationDuration: delay * totalItems + "ms",
    animationDelay: delay * index + "ms",
    opacity: 1,
  };

  return compiledStyles;
};

export const Loading = ({
  className = "",
  stokeWidth = 1.75,
  ...props
}: LoadingProps) => {
  return (
    <svg
      {...props}
      className={twMerge(["w-6", "h-6"].join(" "), className)}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M6.17156 6.02159L9 8.88037"
        stroke="currentColor"
        strokeWidth={stokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
        className="animate-loading"
        style={calcStyle({ index: 8 })}
      />
      <path
        d="M4 11.9141L8 11.9141"
        stroke="currentColor"
        strokeWidth={stokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
        className="animate-loading"
        style={calcStyle({ index: 7 })}
      />
      <path
        d="M6.17151 17.8052L8.99994 14.9464"
        stroke="currentColor"
        strokeWidth={stokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
        className="animate-loading"
        style={calcStyle({ index: 6 })}
      />
      <path
        d="M12 20V15.957"
        stroke="currentColor"
        strokeWidth={stokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
        className="animate-loading"
        style={calcStyle({ index: 5 })}
      />
      <path
        d="M17.8284 17.8051L15 14.9463"
        stroke="currentColor"
        strokeWidth={stokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
        className="animate-loading"
        style={calcStyle({ index: 4 })}
      />
      <path
        d="M20 11.9141H16"
        stroke="currentColor"
        strokeWidth={stokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
        className="animate-loading"
        style={calcStyle({ index: 3 })}
      />
      <path
        d="M17.8285 6.02148L15.0001 8.88026"
        stroke="currentColor"
        strokeWidth={stokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
        className="animate-loading"
        style={calcStyle({ index: 2 })}
      />
      <path
        d="M12 4V8.04294"
        stroke="currentColor"
        strokeWidth={stokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
        className="animate-loading"
        style={calcStyle({ index: 1 })}
      />
    </svg>
  );
};

Loading...