diff --git a/src/index.html b/src/index.html
index a2695cef..5835b8ea 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,13 +1,88 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
-        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800&display=swap&subset=cyrillic" rel="stylesheet">
-        <title><%= htmlWebpackPlugin.options.title %></title>
-    </head>
-    <body>
-        <div id="app"></div>
-    </body>
-</html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800&display=swap&subset=cyrillic"
+        rel="stylesheet" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <style>
+        #main_loader {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            background: #222222;
+            top: 0;
+            left: 0;
+            z-index: 100;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            font: 600 22px 'Montserrat';
+            color: white;
+        }
+
+        #main_loader>div {
+            margin: 3px 0;
+        }
+
+        @keyframes erdball {
+            0% {
+                transform: translate(100%, 100%);
+            }
+
+            100% {
+                transform: translate(0, 0);
+            }
+        }
+
+        #preload_shade {
+            width: 120px;
+            height: 120px;
+            box-shadow: white 0 0 0 3px;
+            border-radius: 100%;
+            overflow: hidden;
+            position: relative;
+            margin-bottom: 15px !important;
+        }
+
+        #preload_shade>span {
+            width: 100%;
+            height: 100%;
+            box-shadow: white 0 0 0 2px;
+            border-radius: 100%;
+            overflow: hidden;
+            position: absolute;
+            top: 0;
+            left: 0;
+            animation: erdball 3s infinite;
+            will-change: transform;
+        }
+
+        #preload_shade>span:nth-child(2) {
+            animation-delay: -1s;
+        }
+
+        #preload_shade>span:nth-child(3) {
+            animation-delay: -2s;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="main_loader">
+        <div id="preload_shade">
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+        <div>СМИРЕННО</div>
+        <div>ОЖИДАЙТЕ</div>
+    </div>
+    <div id="app"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/redux/flow/sagas.ts b/src/redux/flow/sagas.ts
index 370629be..527353d4 100644
--- a/src/redux/flow/sagas.ts
+++ b/src/redux/flow/sagas.ts
@@ -37,6 +37,8 @@ function* onGetFlow() {
   yield put(flowSetHeroes(heroes));
   yield put(flowSetRecent(recent));
   yield put(flowSetUpdated(updated));
+
+  document.getElementById('main_loader').style.display = 'none';
 }
 
 function* onSetCellView({ id, flow }: ReturnType<typeof flowSetCellView>) {
