const Overlay = styled.div` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; `; const Loader = styled.svg` animation: rotate 1.5s linear infinite; @keyframes rotate { 100% { transform: rotate(360deg); } } `; const LoadingOverlay = () => ( <Overlay> <Loader xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" > <circle cx="50" cy="50" r="45" fill="none" strokeWidth="5" stroke="#ffffff" /> <circle cx="50" cy="50" r="35" fill="none" strokeWidth="5" stroke="#ffffff" strokeLinecap="round" > <animate attributeName="r" repeatCount="indefinite" dur="1.5s" values="0;40;40" keyTimes="0;0.5;1" keySplines="0 0.2 0.8 1;0 0.2 0.8 1" calcMode="spline" /> <animate attributeName="opacity" repeatCount="indefinite" dur="1.5s" values="1;1;0" keyTimes="0;0.5;1" keySplines="0.2 0 0.8 1;0.2 0 0.8 1" calcMode="spline" /> </circle> </Loader> </Overlay> ); return <LoadingOverlay />;