@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
13 lines (12 loc) • 1.82 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ExpiringSpinner, Logo, LogoContainer, Spinner, SpinnerContainer } from "./styles";
import { AnimatePresence } from "framer-motion";
const CircleSpinner = ({ logo, smallLogo, loading = true, unavailable = false, countdown = false, }) => {
return (_jsxs(LogoContainer, { transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }, children: [_jsx(Logo, { "$small": !unavailable && smallLogo, style: unavailable ? { borderRadius: 0 } : undefined, children: logo }), _jsx(SpinnerContainer, { children: _jsxs(AnimatePresence, { children: [loading && (_jsx(Spinner, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: {
opacity: 0,
transition: {
duration: countdown ? 1 : 0,
},
}, children: _jsxs("svg", { "aria-hidden": "true", width: "102", height: "102", viewBox: "0 0 102 102", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M52 100C24.3858 100 2 77.6142 2 50", stroke: "url(#paint0_linear_1943_4139)", strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint0_linear_1943_4139", x1: "2", y1: "48.5", x2: "53", y2: "100", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "var(--ck-spinner-color)" }), _jsx("stop", { offset: "1", stopColor: "var(--ck-spinner-color)", stopOpacity: "0" })] }) })] }) })), countdown && (_jsxs(ExpiringSpinner, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.25 }, children: [_jsx("div", {}), _jsx("div", {})] }))] }) })] }));
};
export default CircleSpinner;