diff --git a/app/assets/stylesheets/page_bundles/web_ide_loader.scss b/app/assets/stylesheets/page_bundles/web_ide_loader.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f922cadc235fd15d2231f4784402fd05729e32b8
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/web_ide_loader.scss
@@ -0,0 +1,38 @@
+.web-ide-loader {
+  max-width: 400px;
+}
+
+.web-ide-loader .tanuki-logo {
+  width: 50px;
+  height: 50px;
+}
+
+.web-ide-loader .tanuki,
+.web-ide-loader .right-cheek,
+.web-ide-loader .chin,
+.web-ide-loader .left-cheek {
+  animation: animate-tanuki 1.5s infinite;
+}
+
+.web-ide-loader .right-cheek {
+  animation-delay: 0.35s;
+}
+
+.web-ide-loader .chin {
+  animation-delay: 0.7s;
+}
+
+.web-ide-loader .left-cheek {
+  animation-delay: 1.05s;
+}
+
+@keyframes animate-tanuki {
+  0%,
+  50% {
+    filter: brightness(1) grayscale(0);
+  }
+
+  25% {
+    filter: brightness(1.2) grayscale(0.2);
+  }
+}
diff --git a/app/views/ide/_show.html.haml b/app/views/ide/_show.html.haml
index eb6d5668807840e9a689ee6c08469998de5519a3..4b16c0199ba62c6afe78bb277fe1d147ed25fd25 100644
--- a/app/views/ide/_show.html.haml
+++ b/app/views/ide/_show.html.haml
@@ -1,4 +1,5 @@
 - page_title _("IDE"), @project.full_name
+- add_page_specific_style 'page_bundles/web_ide_loader'
 
 - unless use_new_web_ide?
   - add_page_specific_style 'page_bundles/build'
@@ -9,4 +10,4 @@
 
 - data = ide_data(project: @project, fork_info: @fork_info, params: params)
 
-= render partial: 'shared/ide_root', locals: { data: data, loading_text: _('Loading the GitLab IDE...') }
+= render partial: 'shared/ide_root', locals: { data: data, loading_text: _('Loading the GitLab IDE') }
diff --git a/app/views/shared/_ide_root.html.haml b/app/views/shared/_ide_root.html.haml
index 848ff1e5728ff81f972dfb70a60b87297be780d5..db3e76e188c4dfdf593217cc99097791bebfb078 100644
--- a/app/views/shared/_ide_root.html.haml
+++ b/app/views/shared/_ide_root.html.haml
@@ -3,9 +3,8 @@
 
 -# Fix for iOS 13+, the height of the page is actually less than
 -# 100vh because of the presence of the bottom bar
-- @body_class = 'gl-max-h-full gl-fixed'
 
-#ide.gl--flex-center.gl-h-full{ data: data }
-  .gl-text-center
-    = gl_loading_icon(size: 'md')
-    %h2.clgray= loading_text
+#ide.gl-h-full{ data: data }
+  .web-ide-loader.gl-display-flex.gl-justify-content-center.gl-align-items-center.gl-flex-direction-column.gl-h-full.gl-mr-auto.gl-ml-auto
+    = brand_header_logo
+    %h3.clblack.gl-mt-6= loading_text
diff --git a/config/application.rb b/config/application.rb
index 5aca9b999a74ab36a94369d44f72197a27e0fbc4..9764e13082cd9262a9a020d5ce2b4f775c080f28 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -336,6 +336,7 @@ class Application < Rails::Application
     config.assets.precompile << "page_bundles/todos.css"
     config.assets.precompile << "page_bundles/tree.css"
     config.assets.precompile << "page_bundles/users.css"
+    config.assets.precompile << "page_bundles/web_ide_loader.css"
     config.assets.precompile << "page_bundles/wiki.css"
     config.assets.precompile << "page_bundles/work_items.css"
     config.assets.precompile << "page_bundles/xterm.css"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 87b7b99095b40e9a215391140e55d062288aa8a7..263e9884fc4b14797226b7abc3345701fd154c5d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -27188,7 +27188,7 @@ msgstr ""
 msgid "Loading snippet"
 msgstr ""
 
-msgid "Loading the GitLab IDE..."
+msgid "Loading the GitLab IDE"
 msgstr ""
 
 msgid "Loading, please wait."