diff --git a/app/packages/components/src/components/Loading/LoadingSpinner.tsx b/app/packages/components/src/components/Loading/LoadingSpinner.tsx
new file mode 100644
index 0000000000..b14e99daf3
--- /dev/null
+++ b/app/packages/components/src/components/Loading/LoadingSpinner.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+import { CircularProgress } from "@mui/material";
+
+const LoadingSpinner = ({
+  color = "base",
+  size = "medium",
+}: {
+  color?: string;
+  size?: string;
+}) => {
+  const COLORS: { [key: string]: string } = {
+    base: "#FFC59B",
+    primary: "primary",
+    secondary: "secondary",
+    error: "error",
+    warning: "warning",
+    info: "info",
+    success: "success",
+  };
+  const SIZES: { [key: string]: string } = {
+    small: "1rem",
+    medium: "2rem",
+    large: "3rem",
+  };
+  return <CircularProgress sx={{ color: COLORS[color] }} size={SIZES[size]} />;
+};
+
+export default LoadingSpinner;
diff --git a/app/packages/core/src/plugins/SchemaIO/components/LoadingView.tsx b/app/packages/core/src/plugins/SchemaIO/components/LoadingView.tsx
index 719c6f3ec6..bf5bf4090e 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/LoadingView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/LoadingView.tsx
@@ -1,4 +1,5 @@
 import LoadingDots from "@fiftyone/components/src/components/Loading/LoadingDots";
+import LoadingSpinner from "@fiftyone/components/src/components/Loading/LoadingSpinner";
 import { Box } from "@mui/material";
 import React from "react";
 import { getComponentProps } from "../utils";
@@ -6,11 +7,15 @@ import { getComponentProps } from "../utils";
 export default function LoadingView(props) {
   const { schema } = props;
   const { view = {} } = schema;
-  const { label = "Loading" } = view;
+  const { text = "Loading", variant, color, size } = view;
 
   return (
     <Box {...getComponentProps(props, "container")}>
-      <LoadingDots text={label} {...getComponentProps(props, "loading")} />
+      {variant === "spinner" ? (
+        <LoadingSpinner color={color} size={size} />
+      ) : (
+        <LoadingDots text={text} {...getComponentProps(props, "loading")} />
+      )}
     </Box>
   );
 }