diff --git a/index.html b/index.html
index 225d980..8d90c3a 100644
--- a/index.html
+++ b/index.html
@@ -11,12 +11,15 @@
     />
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="manifest" href="/manifest.json" />
-    <link rel="stylesheet" href="/fonts/fonts.css" />
+    <link rel="stylesheet" href="/fonts/fonts.css" preload />
+    <link rel="stylesheet" href="/preload.css" preload />
     <script type="module" src="/src/index.jsx"></script>
     <title>Farm Control</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root">
+      <div class="fc-preload"><div class="fc-loader"></div></div>
+    </div>
   </body>
 </html>
diff --git a/public/preload.css b/public/preload.css
new file mode 100644
index 0000000..5103c17
--- /dev/null
+++ b/public/preload.css
@@ -0,0 +1,37 @@
+.fc-preload {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: black;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  body {
+    background-color: white;
+  }
+}
+
+/* HTML: <div class="loader"></div> */
+.fc-loader {
+  width: 35px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background:
+    radial-gradient(farthest-side, #008eff 94%, #0000) top/6px 6px no-repeat,
+    conic-gradient(#0000 30%, #008eff);
+  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 0);
+  animation: l13 1s infinite linear;
+}
+
+@keyframes l13 {
+  100% {
+    transform: rotate(1turn);
+  }
+}
