vue-easytable/libs/theme-dark/ve-loading.css

Vue table component

/* ve-table */
/* ve-pagination */
/* ve-checkbox */
/* ve-radio */
/* ve-select */
/* ve-dropdown */
/* ve-contextmenu */
.ve-loading-parent-relative {
  position: relative !important;
}
.ve-loading-parent-lock {
  overflow: hidden !important;
}
.ve-loading {
  /* plane */
  /* bounce */
  /* wave */
  /* pulse */
  /* flow */
  /* grid */
}
.ve-loading.ve-loading-overlay {
  position: absolute;
  z-index: 1999;
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.ve-loading.ve-loading-fixed {
  position: fixed !important;
}
.ve-loading.ve-loading-hide {
  display: none;
}
.ve-loading-spin-container {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  margin-left: -20px;
  width: 100%;
  text-align: center;
}
.ve-loading-spin-container .ve-loading-spin {
  display: inline-block;
}
.ve-loading-plane {
  animation: sk-plane 1.2s infinite ease-in-out;
}
@keyframes sk-plane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
.ve-loading-bounce {
  position: relative;
}
.ve-loading-bounce-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* background-color: var(--sk-color); */
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: sk-bounce 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.ve-loading-bounce-dot:nth-child(2) {
  animation-delay: -1s;
}
@keyframes sk-bounce {
  0%,
  100% {
    transform: scale(0);
  }
  45%,
  55% {
    transform: scale(1);
  }
}
.ve-loading-wave {
  display: flex;
  justify-content: space-between;
}
.ve-loading-wave-rect {
  height: 100%;
  width: 15%;
  animation: sk-wave 1.2s infinite ease-in-out;
}
.ve-loading-wave-rect:nth-child(1) {
  animation-delay: -1.2s;
}
.ve-loading-wave-rect:nth-child(2) {
  animation-delay: -1.1s;
}
.ve-loading-wave-rect:nth-child(3) {
  animation-delay: -1s;
}
.ve-loading-wave-rect:nth-child(4) {
  animation-delay: -0.9s;
}
.ve-loading-wave-rect:nth-child(5) {
  animation-delay: -0.8s;
}
@keyframes sk-wave {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}
.ve-loading-pulse {
  width: var(--sk-size);
  height: var(--sk-size);
  background-color: var(--sk-color);
  border-radius: 100%;
  animation: sk-pulse 1.2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
@keyframes sk-pulse {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.ve-loading-flow {
  width: calc(var(--sk-size) * 1.3);
  height: calc(var(--sk-size) * 1.3);
  display: flex;
  justify-content: space-between;
}
.ve-loading-flow-dot {
  width: 25%;
  height: 25%;
  background-color: var(--sk-color);
  border-radius: 50%;
  animation: sk-flow 1.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s infinite both;
}
.ve-loading-flow-dot:nth-child(1) {
  animation-delay: -0.3s;
}
.ve-loading-flow-dot:nth-child(2) {
  animation-delay: -0.15s;
}
@keyframes sk-flow {
  0%,
  80%,
  100% {
    transform: scale(0.3);
  }
  40% {
    transform: scale(1);
  }
}
.ve-loading-grid {
  /* Cube positions
     * 1 2 3
     * 4 5 6
     * 7 8 9
     */
}
.ve-loading-grid-cube {
  width: 33.33%;
  height: 33.33%;
  background-color: var(--sk-color);
  float: left;
  animation: sk-grid 1.3s infinite ease-in-out;
}
.ve-loading-grid-cube:nth-child(1) {
  animation-delay: 0.2s;
}
.ve-loading-grid-cube:nth-child(2) {
  animation-delay: 0.3s;
}
.ve-loading-grid-cube:nth-child(3) {
  animation-delay: 0.4s;
}
.ve-loading-grid-cube:nth-child(4) {
  animation-delay: 0.1s;
}
.ve-loading-grid:nth-child(5) {
  animation-delay: 0.2s;
}
.ve-loading-grid-cube:nth-child(6) {
  animation-delay: 0.3s;
}
.ve-loading-grid-cube:nth-child(7) {
  animation-delay: 0s;
}
.ve-loading-grid-cube:nth-child(8) {
  animation-delay: 0.1s;
}
.ve-loading-grid-cube:nth-child(9) {
  animation-delay: 0.2s;
}
@keyframes sk-grid {
  0%,
  70%,
  100% {
    transform: scale3D(1, 1, 1);
  }
  35% {
    transform: scale3D(0, 0, 1);
  }
}