Better interface, loading icon

controllers/total/templates/total.pug

@@ -1,8 +1,46 @@
 extends ../../../templates/base.pug
 
 block content
-    #loading Loading... please wait
+    #loading
+        .center
+            .loader
+            div Loading your calendar, please wait...
+
+    #error(style="display:none;")
+        .row
+            .col-2
+            .col-8
+                .alert.alert-danger
+                    .row
+                        .col-8
+                            .center.btn
+                                <strong>Error:</strong> could not connect to calendar
+                        .col-4
+                            button#tryAgain.btn.btn-primary Click here to try again
+            .col-2
     #result
 
+block extracss
+    style.
+        .center {
+            text-align: center;
+        }
+
+        .loader {
+            display: inline-block;
+            text-align: center;
+            border: 16px solid #f3f3f3; /* Light grey */
+            border-top: 16px solid #3498db; /* Blue */
+            border-radius: 50%;
+            width: 120px;
+            height: 120px;
+            animation: spin 2s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
 block extrajs
     script(src="/static/js/totalTable.js")