Animated Spinner

1"use client";
2 
3export function AnimatedSpinner({ className = "" }: { className?: string }) {
4  return (
5    <div className={`inline-block w-6 h-6 ${className}`}>
6      <svg
7        width="20"
8        height="20"
9        viewBox="0 0 20 20"
10        fill="none"
11        xmlns="http://www.w3.org/2000/svg"
12      >
13        {/* Top spike */}
14        <path
15          d="M10.5 0.75V3.75C10.5 3.94891 10.421 4.13968 10.2803 4.28033C10.1397 4.42099 9.94891 4.5 9.75 4.5C9.55109 4.5 9.36032 4.42099 9.21967 4.28033C9.07902 4.13968 9 3.94891 9 3.75V0.75C9 0.551088 9.07902 0.360318 9.21967 0.219666C9.36032 0.0790132 9.55109 0 9.75 0C9.94891 0 10.1397 0.0790132 10.2803 0.219666C10.421 0.360318 10.5 0.551088 10.5 0.75Z"
16          fill="currentColor"
17          className="animate-[appleFade_0.8s_ease-in-out_infinite]"
18          style={{ animationDelay: "0s" }}
19        />
20 
21        {/* Top-right spike */}
22        <path
23          d="M13.6957 4.75645L15.8173 2.63582C15.9591 2.50111 16.1479 2.42711 16.3434 2.42962C16.539 2.43212 16.7259 2.51093 16.8642 2.64923C17.0025 2.78753 17.0813 2.97439 17.0838 3.16996C17.0863 3.36553 17.0123 3.55434 16.8776 3.69614L14.7569 5.8177C14.6162 5.95843 14.4253 6.03749 14.2263 6.03749C14.0273 6.03749 13.8364 5.95843 13.6957 5.8177C13.555 5.67697 13.4759 5.4861 13.4759 5.28708C13.4759 5.08805 13.555 4.89718 13.6957 4.75645Z"
24          fill="currentColor"
25          className="animate-[appleFade_0.8s_ease-in-out_infinite]"
26          style={{ animationDelay: "0.1s" }}
27        />
28 
29        {/* Right spike */}
30        <path
31          d="M18.75 9H15.75C15.5511 9 15.3603 9.07901 15.2197 9.21967C15.079 9.36032 15 9.55109 15 9.75C15 9.94891 15.079 10.1397 15.2197 10.2803C15.3603 10.421 15.5511 10.5 15.75 10.5H18.75C18.9489 10.5 19.1397 10.421 19.2803 10.2803C19.421 10.1397 19.5 9.94891 19.5 9.75C19.5 9.55109 19.421 9.36032 19.2803 9.21967C19.1397 9.07901 18.9489 9 18.75 9Z"
32          fill="currentColor"
33          className="animate-[appleFade_0.8s_ease-in-out_infinite]"
34          style={{ animationDelay: "0.2s" }}
35        />
36 
37        {/* Bottom-right spike */}
38        <path
39// … truncated