CMXX - First candidate

style/admin.css

@@ -2711,4 +2711,63 @@ h4.label {
 .order-detail input {
   border: 0;
   border-bottom: 1px solid #dedfe1
+}
+
+.loading-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s, visibility 0.3s;
+}
+
+.loading-container.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.loading-bar {
+  width: 200px;
+  height: 10px;
+  background-color: #f0f0f0;
+  border-radius: 5px;
+  overflow: hidden;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.progress {
+  height: 100%;
+  width: 0%;
+  background-color: #4CAF50;
+  animation: progressAnimation 2s infinite ease-in-out;
+}
+
+.loading-text {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #333;
+}
+
+@keyframes progressAnimation {
+  0% { width: 0%; }
+  50% { width: 100%; }
+  100% { width: 0%; }
+}
+
+/* Hide the loading bar when page is loaded */
+.loaded .loading-container {
+  display: none;
+}
+
+.hidden {
+  display: none !important;
 }