All files / src/components/ui/icons LoaderIcon.tsx

100% Statements 62/62
100% Branches 1/1
100% Functions 1/1
100% Lines 62/62

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 631x 1x 1x 1x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x 72x  
/**
 * LoaderIcon - Loading spinner icon
 * Commonly used for loading states
 */
export default function LoaderIcon({
  width = 16,
  height = 16,
  className = 'fill-current',
  ...props
}: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      className={className}
      width={width}
      height={height}
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8 1.5C8.27614 1.5 8.5 1.72386 8.5 2V4C8.5 4.27614 8.27614 4.5 8 4.5C7.72386 4.5 7.5 4.27614 7.5 4V2C7.5 1.72386 7.72386 1.5 8 1.5Z"
        fill="currentColor"
      />
      <path
        d="M8 11.5C8.27614 11.5 8.5 11.7239 8.5 12V14C8.5 14.2761 8.27614 14.5 8 14.5C7.72386 14.5 7.5 14.2761 7.5 14V12C7.5 11.7239 7.72386 11.5 8 11.5Z"
        fill="currentColor"
        opacity="0.3"
      />
      <path
        d="M12.5962 3.40381C12.7915 3.59907 12.7915 3.91565 12.5962 4.11092L11.182 5.52513C10.9867 5.72039 10.6702 5.72039 10.4749 5.52513C10.2796 5.32987 10.2796 5.01329 10.4749 4.81802L11.889 3.40381C12.0843 3.20855 12.4009 3.20855 12.5962 3.40381Z"
        fill="currentColor"
        opacity="0.9"
      />
      <path
        d="M5.52513 10.4749C5.72039 10.6702 5.72039 10.9867 5.52513 11.182L4.11092 12.5962C3.91565 12.7915 3.59907 12.7915 3.40381 12.5962C3.20855 12.4009 3.20855 12.0843 3.40381 11.889L4.81802 10.4749C5.01329 10.2796 5.32987 10.2796 5.52513 10.4749Z"
        fill="currentColor"
        opacity="0.4"
      />
      <path
        d="M14.5 8C14.5 8.27614 14.2761 8.5 14 8.5H12C11.7239 8.5 11.5 8.27614 11.5 8C11.5 7.72386 11.7239 7.5 12 7.5H14C14.2761 7.5 14.5 7.72386 14.5 8Z"
        fill="currentColor"
        opacity="0.8"
      />
      <path
        d="M4.5 8C4.5 8.27614 4.27614 8.5 4 8.5H2C1.72386 8.5 1.5 8.27614 1.5 8C1.5 7.72386 1.72386 7.5 2 7.5H4C4.27614 7.5 4.5 7.72386 4.5 8Z"
        fill="currentColor"
        opacity="0.5"
      />
      <path
        d="M12.5962 12.5962C12.4009 12.7915 12.0843 12.7915 11.889 12.5962L10.4749 11.182C10.2796 10.9867 10.2796 10.6702 10.4749 10.4749C10.6702 10.2796 10.9867 10.2796 11.182 10.4749L12.5962 11.889C12.7915 12.0843 12.7915 12.4009 12.5962 12.5962Z"
        fill="currentColor"
        opacity="0.7"
      />
      <path
        d="M5.52513 5.52513C5.32987 5.72039 5.01329 5.72039 4.81802 5.52513L3.40381 4.11092C3.20855 3.91565 3.20855 3.59907 3.40381 3.40381C3.59907 3.20855 3.91565 3.20855 4.11092 3.40381L5.52513 4.81802C5.72039 5.01329 5.72039 5.32987 5.52513 5.52513Z"
        fill="currentColor"
        opacity="0.6"
      />
    </svg>
  );
}