diff --git a/blueocean-web/src/main/resources/io/jenkins/blueocean/BlueOceanUI/index.jelly b/blueocean-web/src/main/resources/io/jenkins/blueocean/BlueOceanUI/index.jelly
index dca759123f5..dc61f3c0db9 100644
--- a/blueocean-web/src/main/resources/io/jenkins/blueocean/BlueOceanUI/index.jelly
+++ b/blueocean-web/src/main/resources/io/jenkins/blueocean/BlueOceanUI/index.jelly
@@ -62,17 +62,13 @@
         </head>
 
         <body>
-            <div id="loadbar">
+            <div id="loadbar" data-is-development-mode="${it.developmentMode}">
                 <div class="font-loader-text">
                     loading
                     <h1>BlueOcean</h1>
                 </div>
             </div>
-            <script>
-                window.isDevelopmentMode = ${it.developmentMode};
-                function lb(c,t){setTimeout(function(){document.getElementById('loadbar').classList.add(c)},t)}
-                lb('go',10);lb('long',1000);lb('longer',6000);
-            </script>
+            <st:adjunct includes="io.jenkins.blueocean.BlueOceanUI.loadbar"/>
             <!-- App root -->
             <div id="root" class="container-fluid">
                 <noscript>
diff --git a/blueocean-web/src/main/resources/io/jenkins/blueocean/BlueOceanUI/loadbar.js b/blueocean-web/src/main/resources/io/jenkins/blueocean/BlueOceanUI/loadbar.js
new file mode 100644
index 00000000000..f97d5e63812
--- /dev/null
+++ b/blueocean-web/src/main/resources/io/jenkins/blueocean/BlueOceanUI/loadbar.js
@@ -0,0 +1,9 @@
+window.isDevelopmentMode = document.getElementById('loadbar').dataset.isDevelopmentMode === 'true';
+function lb(c, t) {
+  setTimeout(function () {
+    document.getElementById('loadbar').classList.add(c);
+  }, t);
+}
+lb('go', 10);
+lb('long', 1000);
+lb('longer', 6000);
