diff --git a/src/components/spinner/Spinner.test.tsx b/src/components/spinner/Spinner.test.tsx
new file mode 100644
index 0000000..3b0d4a5
--- /dev/null
+++ b/src/components/spinner/Spinner.test.tsx
@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect } from "vitest";
+import { Spinner, type SpinnerProps } from "./Spinner";
+
+const defaultProps: SpinnerProps = {
+	size: "md",
+	className: "",
+};
+
+const renderSpinner = (additionalProps?: Partial<SpinnerProps>) => {
+	const user = userEvent.setup();
+
+	render(<Spinner {...defaultProps} {...additionalProps} />);
+
+	return {
+		user,
+		spinner: screen.getByRole("status", { name: /loading/i }),
+	};
+};
+
+describe("Spinner", () => {
+	it("should render a loading indicator with accessible role", () => {
+		const { spinner } = renderSpinner();
+
+		expect(spinner).toBeInTheDocument();
+	});
+});
diff --git a/src/components/spinner/Spinner.tsx b/src/components/spinner/Spinner.tsx
new file mode 100644
index 0000000..56ec01e
--- /dev/null
+++ b/src/components/spinner/Spinner.tsx
@@ -0,0 +1,19 @@
+export interface SpinnerProps {
+	size?: "sm" | "md" | "lg";
+	className?: string;
+}
+
+export const Spinner = ({ size = "md", className = "" }: SpinnerProps) => {
+	const sizeStyles = {
+		sm: "w-4 h-4 border-2",
+		md: "w-8 h-8 border-3",
+		lg: "w-12 h-12 border-4",
+	} as const;
+
+	return (
+		<output
+			className={`inline-block ${sizeStyles[size]} border-gray-200 border-t-blue-600 rounded-full animate-spin ${className}`}
+			aria-label="Loading"
+		/>
+	);
+};