add simple spinner for heavy xhr page

digitalfox · Apr 2, 2024 · db91039 · db91039
1 parent 4ef8f9c
commit db91039
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/media/css/pydici.css b/media/css/pydici.css
@@ -631,4 +631,23 @@ td a:hover {
 /* fix pivotable context menu position */
 .pvtUi .pvtTriangle {
     position: relative;
-}
+}
+
+/* simple spinner for heavy XHR page */
+/* HTML: <div class="loader"></div> */
+.loader {
+  width: 50px;
+  padding: 10px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: #8F6749;
+  --_m:
+    conic-gradient(#0000 10%,#000),
+    linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--_m);
+          mask: var(--_m);
+  -webkit-mask-composite: source-out;
+          mask-composite: subtract;
+  animation: l3 1s infinite linear;
+}
+@keyframes l3 {to{transform: rotate(1turn)}}
diff --git a/templates/crm/clientcompany_detail.html b/templates/crm/clientcompany_detail.html
@@ -400,9 +400,13 @@ <h2 class="mt-4">{% trans "Administrative contacts" %}</h2>
         {% endif %}
     </div>
 
-    <div id="tab-rates-margin" class="tab-pane fade" role="tabpanel"></div>
+    <div id="tab-rates-margin" class="tab-pane fade" role="tabpanel">
+        <div class="loader m-3"></div>
+    </div>
 
-    <div id="tab-billing" class="tab-pane fade" role="tabpanel"></div>
+    <div id="tab-billing" class="tab-pane fade" role="tabpanel">
+        <div class="loader m-3"></div>
+    </div>
 
     <div id="tab-reporting" class="tab-pane fade" role="tabpanel"></div>