styling

src/components/Loader.jsx

@@ -0,0 +1,52 @@
+export function Loader({ height, noMargin, leftMargin }) {
+	return (
+		<svg
+			viewBox="0 0 166 166"
+			height={height || '1.6em'}
+			style={{
+				margin: noMargin
+					? null
+					: leftMargin
+					? ` 0 0 0 ${leftMargin}`
+					: '0 0.8rem'
+			}}
+			class="new-loader"
+		>
+			<g fill="none" fillRule="evenodd">
+				<path
+					d="M83 166c-45.84 0-83-37.16-83-83S37.16 0 83 0s83 37.16 83 83-37.16 83-83 83zm0-29c29.823 0 54-24.177 54-54s-24.177-54-54-54-54 24.177-54 54 24.177 54 54 54z"
+					fill="currentColor"
+					style={{ opacity: 0.2 }}
+				/>
+				<path
+					d="M137.008 83H137c0-29.823-24.177-54-54-54S29 53.177 29 83h-.008c.005.166.008.333.008.5C29 91.508 22.508 98 14.5 98S0 91.508 0 83.5c0-.167.003-.334.008-.5H0C0 37.16 37.16 0 83 0s83 37.16 83 83h-.008c.005.166.008.333.008.5 0 8.008-6.492 14.5-14.5 14.5S137 91.508 137 83.5c0-.167.003-.334.008-.5z"
+					fill="currentColor"
+				/>
+				<animateTransform
+					attributeName="transform"
+					attributeType="XML"
+					type="rotate"
+					dur="1s"
+					from="0 83 83"
+					to="360 83 83"
+					repeatCount="indefinite"
+				/>
+			</g>
+		</svg>
+	);
+}
+
+export function LoaderWithText({ children }) {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
+				margin: '2rem 1rem'
+			}}
+		>
+			<Loader /> {children}
+		</div>
+	);
+}