loading screen

snippets/shx-loading-screen.liquid

@@ -1,7 +1,9 @@
 {% assign content_type = content_type | default: 'body' %}
 
 {% if content_type == 'body' %}
-  <div id="shx-loading-screen"></div>
+  <div id="shx-loading-screen">
+    <div class="loader"></div>
+  </div>
 {% elsif content_type == 'head' %}
   <style>
     #shx-loading-screen {
@@ -22,6 +24,21 @@
       opacity: 0;
       pointer-events: none;
     }
+
+    /* CSS für den Ladeindikator */
+    .loader {
+      border: 16px solid #f3f3f3;
+      border-top: 16px solid #3498db;
+      border-radius: 50%;
+      width: 120px;
+      height: 120px;
+      animation: spin 2s linear infinite;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
   </style>
 
   <script>