@workday/canvas-kit-css/loading-dots.css

The parent module that contains all Workday Canvas Kit CSS components

@keyframes animation-2kylwi {
  0%, 80%, 100% {
    transform: scale(0);
  }
  
  40% {
    transform: scale(1);
  }
  
  0%, 79%, 100% {
    opacity: 0.6;
  }
  
  27% {
    opacity: 1;
  }
  
  53% {
    opacity: 0.8;
  }
  
}

.cnvs-loading-dots {
  --cnvs-loading-dots-animation-duration-ms: 40ms;
  --cnvs-loading-dots-loading-dot-color: var(--cnvs-sys-color-bg-muted-strong);
  box-sizing: border-box;
  display: inline-flex;
  gap: var(--cnvs-sys-space-x2);
}

.cnvs-loading-dots [data-part="loading-animation-dot"] {
  background-color: var(--cnvs-loading-dots-loading-dot-color);
  width: var(--cnvs-sys-space-x4);
  height: var(--cnvs-sys-space-x4);
  font-size: var(--cnvs-sys-space-zero);
  border-radius: var(--cnvs-sys-shape-round);
  outline: 0.125rem solid transparent;
  transform: scale(0);
  display: inline-block;
  animation-name: animation-2kylwi;
  animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

.cnvs-loading-dots [data-part="loading-animation-dot"]:nth-child(1) {
  animation-delay: 0ms;
}

.cnvs-loading-dots [data-part="loading-animation-dot"]:nth-child(2) {
  animation-delay: calc(var(--cnvs-loading-dots-animation-duration-ms) * 4);
}

.cnvs-loading-dots [data-part="loading-animation-dot"]:nth-child(3) {
  animation-delay: calc(var(--cnvs-loading-dots-animation-duration-ms) * 8);
}


.cnvs-loading-dots.variant-inverse [data-part="loading-animation-dot"] {
  background-color: var(--cnvs-sys-color-bg-default, var(--cnvs-loading-dots-loading-dot-color));
}