diff --git a/web/gatsby-browser.js b/web/gatsby-browser.js
index 07ebbfc2..c3bc9175 100644
--- a/web/gatsby-browser.js
+++ b/web/gatsby-browser.js
@@ -14,3 +14,4 @@ import "@fontsource/open-sans"
 import "@fontsource/exo"
 import "@fontsource/exo-2"
 
+import "./src/styles/preloader.scss"
diff --git a/web/gatsby-ssr.js b/web/gatsby-ssr.js
index f772f9cd..5b55d25a 100644
--- a/web/gatsby-ssr.js
+++ b/web/gatsby-ssr.js
@@ -1,7 +1,8 @@
-import * as React from "react"
+import * as React from "react";
+import loadingSVG from "./src/assets/svg/bouncing-circles.svg"
 
 
-export const onRenderBody = ({ setHeadComponents }) => {
+export const onRenderBody = ({ setHeadComponents, setPreBodyComponents, setBodyAttributes, setPostBodyComponents }) => {
   setHeadComponents([
     <link
       key="bohemian-regular"
@@ -11,5 +12,23 @@ export const onRenderBody = ({ setHeadComponents }) => {
       type="font/woff"
       crossOrigin="anonymous"
     />,
-  ]);
-};
\ No newline at end of file
+    <link
+      key="preloader"
+      as="script"
+      rel="preload"
+      href="/preloader.js"
+    />
+  ])
+  setPreBodyComponents([
+    <div key="svgLoader" id="preloader">
+      <img src={loadingSVG} />
+    </div>
+  ])
+  setBodyAttributes({
+    className: "preloader_active"
+  })
+  setPostBodyComponents([
+    <script key ="preloaderScript" src="/preloader.js" />
+  ])
+}
+
diff --git a/web/src/assets/svg/bouncing-circles.svg b/web/src/assets/svg/bouncing-circles.svg
new file mode 100644
index 00000000..3703bc22
--- /dev/null
+++ b/web/src/assets/svg/bouncing-circles.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><circle fill='#FF156D' stroke='#FF156D' stroke-width='15' r='15' cx='40' cy='65'><animate attributeName='cy' calcMode='spline' dur='2' values='65;135;65;' keySplines='.5 0 .5 1;.5 0 .5 1' repeatCount='indefinite' begin='-.4'></animate></circle><circle fill='#FF156D' stroke='#FF156D' stroke-width='15' r='15' cx='100' cy='65'><animate attributeName='cy' calcMode='spline' dur='2' values='65;135;65;' keySplines='.5 0 .5 1;.5 0 .5 1' repeatCount='indefinite' begin='-.2'></animate></circle><circle fill='#FF156D' stroke='#FF156D' stroke-width='15' r='15' cx='160' cy='65'><animate attributeName='cy' calcMode='spline' dur='2' values='65;135;65;' keySplines='.5 0 .5 1;.5 0 .5 1' repeatCount='indefinite' begin='0'></animate></circle></svg>
\ No newline at end of file
diff --git a/web/src/styles/preloader.scss b/web/src/styles/preloader.scss
new file mode 100644
index 00000000..adb5146a
--- /dev/null
+++ b/web/src/styles/preloader.scss
@@ -0,0 +1,47 @@
+body {
+  #preloader {
+    position: fixed;
+    display: none;
+    top: 0;
+    left: -10%;
+    right: -10%;
+    height: 0;
+    margin-left: calc(100vw - 100%);
+    overflow-x: hidden;
+  }
+
+  &.preloader_active {
+    height: 100vh;
+    overflow-y: hidden;
+
+    #preloader {
+      height: auto;
+      bottom: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      z-index: 9999;
+      display: flex;
+      overflow: hidden;
+    }
+  }
+
+  &.preloader_ready {
+    height: auto;
+    overflow-y: auto;
+
+    #preloader {
+      animation: preloaderLeaving 0.5s forwards;
+
+      @keyframes preloaderLeaving {
+        0% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+    }
+  }
+}
diff --git a/web/static/preloader.js b/web/static/preloader.js
new file mode 100644
index 00000000..17ad63bc
--- /dev/null
+++ b/web/static/preloader.js
@@ -0,0 +1,10 @@
+var body = document.querySelector("body");
+document.onreadystatechange = function () {
+  if (document.readyState === "complete") {
+    body.classList.add("preloader_ready");
+    setTimeout(function () {
+      body.classList.remove("preloader_active");
+      body.classList.remove("preloader_ready");
+    }, 500);
+  }
+};
diff --git a/yarn.lock b/yarn.lock
index 7507e202..54d37eae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6102,6 +6102,11 @@ async@^3.2.5:
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.6.tgz#1b0728e14929d51b85b449b7f06e27c1145e38ce"
   integrity sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==
 
+async@^3.2.4:
+  version "3.2.5"
+  resolved "https://registry.npmjs.org/async/-/async-3.2.5.tgz"
+  integrity sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"