diff --git a/src/Loaders/LoadingSpinner.tsx b/src/Loaders/LoadingSpinner.tsx
index fff4e6bc..763c7556 100644
--- a/src/Loaders/LoadingSpinner.tsx
+++ b/src/Loaders/LoadingSpinner.tsx
@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import React from "react";
 import * as CSS from "csstype";
+import isChromatic from "storybook-chromatic/isChromatic";
 import { jsx, keyframes } from "@emotion/core";
 import { colors } from "../colors";
 
@@ -73,6 +74,9 @@ export const LoadingSpinner: React.FC<Props> = ({
 
   const pixelSize = SIZE_MAP[size];
 
+  const mountTime = React.useRef(Date.now());
+  const mountDelay = isChromatic() ? 0 : -(mountTime.current % 540);
+
   return (
     <svg
       className={className}
@@ -97,6 +101,7 @@ export const LoadingSpinner: React.FC<Props> = ({
           css={{
             animation: `${SPIN} 540ms linear infinite`,
             willChange: "transform",
+            animationDelay: `${mountDelay}ms`,
           }}
           fill={asteroidColor}
           r="10"
diff --git a/typings/storybook-chromatic__isChromatic/index.d.ts b/typings/storybook-chromatic__isChromatic/index.d.ts
new file mode 100644
index 00000000..c99981f3
--- /dev/null
+++ b/typings/storybook-chromatic__isChromatic/index.d.ts
@@ -0,0 +1,4 @@
+declare module "storybook-chromatic/isChromatic" {
+  const isChromatic: () => boolean;
+  export default isChromatic;
+}