diff --git a/Tools/capp/Resources/Templates/Application/index-debug.html b/Tools/capp/Resources/Templates/Application/index-debug.html
index a36b1d3b9..cb501bdb7 100644
--- a/Tools/capp/Resources/Templates/Application/index-debug.html
+++ b/Tools/capp/Resources/Templates/Application/index-debug.html
@@ -61,10 +61,12 @@
 
             var loadingHTML =
                     '<div id="loading">' +
-                    '    <div id="loading-text">Loading...</div>' +
-                    '    <div id="progress-indicator">' +
-                    '        <span id="progress-bar" style="width:0%"></span>' +
-                    '    </div>' +
+	                '    <div style="flex-grow: 35"></div>' +
+	                '    <div id="loading-text">Loading...</div>' +
+	                '    <div id="progress-indicator">' +
+	                '        <span id="progress-bar" style="width:0%"></span>' +
+	                '    </div>' +
+	                '    <div style="flex-grow: 65"></div>' +
                     '</div>';
         </script>
 
@@ -131,8 +133,11 @@
             }
 
             #loading {
-                position: relative;
-                top: 35%;
+                height: 100%;
+                display:flex;
+                flex-direction:column;
+                flex-wrap:nowrap;
+                justify-content: space-evenly;
             }
 
             #loading-text {
diff --git a/Tools/capp/Resources/Templates/Application/index.html b/Tools/capp/Resources/Templates/Application/index.html
index ac42c98a7..4e9eec1d1 100644
--- a/Tools/capp/Resources/Templates/Application/index.html
+++ b/Tools/capp/Resources/Templates/Application/index.html
@@ -53,10 +53,12 @@
 
             var loadingHTML =
                     '<div id="loading">' +
-                    '    <div id="loading-text">Loading...</div>' +
-                    '    <div id="progress-indicator">' +
-                    '        <span id="progress-bar" style="width:0%"></span>' +
-                    '    </div>' +
+	                '    <div style="flex-grow: 35"></div>' +
+	                '    <div id="loading-text">Loading...</div>' +
+	                '    <div id="progress-indicator">' +
+	                '        <span id="progress-bar" style="width:0%"></span>' +
+	                '    </div>' +
+	                '    <div style="flex-grow: 65"></div>' +
                     '</div>';
         </script>
 
@@ -93,8 +95,11 @@
             }
 
             #loading {
-                position: relative;
-                top: 35%;
+                height: 100%;
+                display:flex;
+                flex-direction:column;
+                flex-wrap:nowrap;
+                justify-content: space-evenly;
             }
 
             #loading-text {
diff --git a/Tools/capp/Resources/Templates/NibApplication/index-debug.html b/Tools/capp/Resources/Templates/NibApplication/index-debug.html
index 02c62149a..a2eb2c2f8 100644
--- a/Tools/capp/Resources/Templates/NibApplication/index-debug.html
+++ b/Tools/capp/Resources/Templates/NibApplication/index-debug.html
@@ -61,10 +61,12 @@
 
             var loadingHTML =
                     '<div id="loading">' +
-                    '    <div id="loading-text">Loading...</div>' +
-                    '    <div id="progress-indicator">' +
-                    '        <span id="progress-bar" style="width:0%"></span>' +
-                    '    </div>' +
+	                '    <div style="flex-grow: 35"></div>' +
+	                '    <div id="loading-text">Loading...</div>' +
+	                '    <div id="progress-indicator">' +
+	                '        <span id="progress-bar" style="width:0%"></span>' +
+	                '    </div>' +
+	                '    <div style="flex-grow: 65"></div>' +
                     '</div>';
         </script>
 
@@ -131,8 +133,11 @@
             }
 
             #loading {
-                position: relative;
-                top: 35%;
+                height: 100%;
+                display:flex;
+                flex-direction:column;
+                flex-wrap:nowrap;
+                justify-content: space-evenly;
             }
 
             #loading-text {
diff --git a/Tools/capp/Resources/Templates/NibApplication/index.html b/Tools/capp/Resources/Templates/NibApplication/index.html
index 30125b9a4..b206065d7 100644
--- a/Tools/capp/Resources/Templates/NibApplication/index.html
+++ b/Tools/capp/Resources/Templates/NibApplication/index.html
@@ -53,10 +53,12 @@
 
             var loadingHTML =
                     '<div id="loading">' +
-                    '    <div id="loading-text">Loading...</div>' +
-                    '    <div id="progress-indicator">' +
-                    '        <span id="progress-bar" style="width:0%"></span>' +
-                    '    </div>' +
+	                '    <div style="flex-grow: 35"></div>' +
+	                '    <div id="loading-text">Loading...</div>' +
+	                '    <div id="progress-indicator">' +
+	                '        <span id="progress-bar" style="width:0%"></span>' +
+	                '    </div>' +
+	                '    <div style="flex-grow: 65"></div>' +
                     '</div>';
         </script>
 
@@ -93,8 +95,11 @@
             }
 
             #loading {
-                position: relative;
-                top: 35%;
+                height: 100%;
+                display:flex;
+                flex-direction:column;
+                flex-wrap:nowrap;
+                justify-content: space-evenly;
             }
 
             #loading-text {
diff --git a/Tools/capp/Resources/Templates/ThemeDescriptor/index-debug.html b/Tools/capp/Resources/Templates/ThemeDescriptor/index-debug.html
index 62f3d10d8..202a7b240 100644
--- a/Tools/capp/Resources/Templates/ThemeDescriptor/index-debug.html
+++ b/Tools/capp/Resources/Templates/ThemeDescriptor/index-debug.html
@@ -61,10 +61,12 @@
 
             var loadingHTML =
                     '<div id="loading">' +
-                    '    <div id="loading-text">Loading...</div>' +
-                    '    <div id="progress-indicator">' +
-                    '        <span id="progress-bar" style="width:0%"></span>' +
-                    '    </div>' +
+	                '    <div style="flex-grow: 35"></div>' +
+	                '    <div id="loading-text">Loading...</div>' +
+	                '    <div id="progress-indicator">' +
+	                '        <span id="progress-bar" style="width:0%"></span>' +
+	                '    </div>' +
+	                '    <div style="flex-grow: 65"></div>' +
                     '</div>';
         </script>
 
@@ -131,8 +133,11 @@
             }
 
             #loading {
-                position: relative;
-                top: 35%;
+                height: 100%;
+                display:flex;
+                flex-direction:column;
+                flex-wrap:nowrap;
+                justify-content: space-evenly;
             }
 
             #loading-text {
diff --git a/Tools/capp/Resources/Templates/ThemeDescriptor/index.html b/Tools/capp/Resources/Templates/ThemeDescriptor/index.html
index 203de81b1..ba4e33317 100644
--- a/Tools/capp/Resources/Templates/ThemeDescriptor/index.html
+++ b/Tools/capp/Resources/Templates/ThemeDescriptor/index.html
@@ -53,10 +53,12 @@
 
             var loadingHTML =
                     '<div id="loading">' +
-                    '    <div id="loading-text">Loading...</div>' +
-                    '    <div id="progress-indicator">' +
-                    '        <span id="progress-bar" style="width:0%"></span>' +
-                    '    </div>' +
+	                '    <div style="flex-grow: 35"></div>' +
+	                '    <div id="loading-text">Loading...</div>' +
+	                '    <div id="progress-indicator">' +
+	                '        <span id="progress-bar" style="width:0%"></span>' +
+	                '    </div>' +
+	                '    <div style="flex-grow: 65"></div>' +
                     '</div>';
         </script>
 
@@ -93,8 +95,11 @@
             }
 
             #loading {
-                position: relative;
-                top: 35%;
+                height: 100%;
+                display:flex;
+                flex-direction:column;
+                flex-wrap:nowrap;
+                justify-content: space-evenly;
             }
 
             #loading-text {