initial commit

packages/woocommerce-blocks/assets/js/base/components/spinner/index.tsx

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const Spinner = (): JSX.Element => {
+	return <span className="wc-block-components-spinner" aria-hidden="true" />;
+};
+
+export default Spinner;

packages/woocommerce-blocks/assets/js/base/components/spinner/style.scss

@@ -0,0 +1,37 @@
+.wc-block-components-spinner {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	color: inherit;
+	box-sizing: content-box;
+	text-align: center;
+	font-size: 1.25em;
+
+	&::after {
+		content: " ";
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		margin: -0.5em 0 0 -0.5em;
+		width: 1em;
+		height: 1em;
+		box-sizing: border-box;
+		transform-origin: 50% 50%;
+		transform: translateZ(0) scale(0.5);
+		backface-visibility: hidden;
+		border-radius: 50%;
+		border: 0.2em solid currentColor;
+		border-left-color: transparent;
+		animation: wc-block-components-spinner__animation 1s infinite linear;
+	}
+}
+
+@keyframes wc-block-components-spinner__animation {
+	0% {
+		animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}