Loader.jsx

import React from 'react';

export default function Loader({ styles }) {
  return (
    <svg
      className={`spin-loader animate-spin ${styles} `}
      viewBox="0 0 24 24"
      fillRule="evenodd"
      fill="currentColor"
      clipRule="evenodd"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d="M4.059 20.994A11.973 11.973 0 010 12c0-.633.049-1.254.144-1.861a4.004 4.004 0 013.983 3.291c.16.889.469 1.728.898 2.489a4.003 4.003 0 01-.966 5.075zM19.434 2.582a4.004 4.004 0 01-4.817 1.856A7.958 7.958 0 0012 4 4.004 4.004 0 018.055.665 11.957 11.957 0 0112 0c2.807 0 5.389.966 7.434 2.582zm-3.056 20.593a4.005 4.005 0 01.823-5.1 8.062 8.062 0 001.708-2.041 4.001 4.001 0 014.867-1.718 12.03 12.03 0 01-7.398 8.859z" />
      <path
        fillOpacity="0.5"
        d="M5.741 22.236a11.978 11.978 0 01-5.74-10.01 4.004 4.004 0 014.494 2.549c.312.848.762 1.62 1.317 2.295a4.004 4.004 0 01-.071 5.166zM17.686 1.434a4.003 4.003 0 01-4.422 2.664 7.965 7.965 0 00-2.653.024 4.003 4.003 0 01-4.464-2.6A11.953 11.953 0 019.916.182a11.95 11.95 0 017.77 1.252zm.566 20.811a4.003 4.003 0 01-.075-5.165 8.07 8.07 0 001.327-2.307A4.004 4.004 0 0124 12.236a12.03 12.03 0 01-5.748 10.009z"
      />
      <path
        fillOpacity="0.4"
        d="M7.614 23.167a11.97 11.97 0 01-6.89-7.063 12.038 12.038 0 01-.502-1.797 4.003 4.003 0 014.869 1.729 7.916 7.916 0 001.695 2.032 4.004 4.004 0 01.828 5.099zM15.765.608a4.004 4.004 0 01-3.893 3.391 7.974 7.974 0 00-2.608.483 4.002 4.002 0 01-4.848-1.785A11.953 11.953 0 017.896.724a11.945 11.945 0 017.869-.116zm4.171 20.396a4.004 4.004 0 01-.97-5.074 8.08 8.08 0 00.906-2.503 4.004 4.004 0 013.986-3.279 12.031 12.031 0 01-3.922 10.856z"
      />
      <path
        fillOpacity="0.3"
        d="M9.62 23.759A11.968 11.968 0 011.608 18a11.99 11.99 0 01-.806-1.683 4.003 4.003 0 015.095.858 7.91 7.91 0 002.022 1.706 4.004 4.004 0 011.701 4.878zM13.729.127a4.001 4.001 0 01-3.244 4.015A7.981 7.981 0 008 5.072a4.004 4.004 0 01-5.084-.916A11.96 11.96 0 016 1.608 11.94 11.94 0 0113.729.127zm7.65 19.362a4.004 4.004 0 01-1.837-4.828c.296-.84.452-1.727.458-2.622a4.004 4.004 0 013.356-3.922 12.03 12.03 0 01-1.977 11.372z"
      />
      <path
        fillOpacity="0.2"
        d="M11.641.007a4.003 4.003 0 01-2.497 4.518 7.967 7.967 0 00-2.286 1.347 4.003 4.003 0 01-5.166-.02 11.978 11.978 0 012.595-3.045 11.944 11.944 0 017.354-2.8zm10.896 17.739a4.002 4.002 0 01-2.647-4.435 8.063 8.063 0 00-.005-2.662 4.004 4.004 0 012.625-4.445 12.031 12.031 0 01.027 11.542zm-20.816.45a4.003 4.003 0 015.167-.04 7.936 7.936 0 002.288 1.329 4.004 4.004 0 012.522 4.509 11.974 11.974 0 01-8.891-4.281 12.176 12.176 0 01-1.086-1.517z"
      />
    </svg>
  );
}