.loading-bar {
  position: relative;
  top: 1px;
  width: 100px;
  text-align: center;
  padding: 5px;
  z-index: 1000;
  border-radius: 4px;
  border: 1px solid antiquewhite;
  background: lemonchiffon;
  color: black;
}

// Ensure the loading indicator is always visible when active
div[style*="position: fixed"] {
  z-index: 9999 !important;
}

mat-progress-bar {
  visibility: visible !important;
  opacity: 1 !important;
  transition: opacity 200ms ease-in-out;

}

// When not loading, hide with transition
mat-progress-bar:not([style*="display: none"]):not([style*="display:none"]) {
  opacity: 1;
}




mat-progress-bar[style*="display: none"],
mat-progress-bar[style*="display:none"] {
  opacity: 0;
}