vuestic-ui/dist/es/VaInnerLoading.css

Vue 3 UI Framework

:root,
:host {
  --va-inner-loading-position: relative;
  --va-inner-loading-min-width: fit-content;
  --va-inner-loading-width: 100%;
  --va-inner-loading-overlay-display: flex;
  --va-inner-loading-overlay-align-items: center;
  --va-inner-loading-overlay-justify-content: center;
  --va-inner-loading-overlay-position: absolute;
  --va-inner-loading-overlay-top: 0;
  --va-inner-loading-overlay-bottom: 0;
  --va-inner-loading-overlay-width: 100%;
  --va-inner-loading-overlay-background: var(--va-background-primary);
}
.va-inner-loading {
  position: var(--va-inner-loading-position);
  min-width: var(--va-inner-loading-min-width);
  width: var(--va-inner-loading-width);
  font-family: var(--va-font-family);
}
.va-inner-loading--active {
  pointer-events: none;
}
.va-inner-loading__overlay {
  display: var(--va-inner-loading-overlay-display);
  align-items: var(--va-inner-loading-overlay-align-items);
  justify-content: var(--va-inner-loading-overlay-justify-content);
  position: var(--va-inner-loading-overlay-position);
  top: var(--va-inner-loading-overlay-top);
  bottom: var(--va-inner-loading-overlay-bottom);
  width: var(--va-inner-loading-overlay-width);
  z-index: 0;
}
.va-inner-loading__overlay::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--va-inner-loading-overlay-background);
  opacity: 0.3;
  z-index: -1;
}