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

The parent module that contains all Workday Canvas Kit CSS components

@keyframes animation-m1sr52 {
  0%, 80%, 100% {
    transform: scale(0);
  }
  
  40% {
    transform: scale(1);
  }
  
}

.cnvs-loading-dots {
  --cnvs-loading-dots-animation-duration-ms: 40ms;
  --cnvs-loading-dots-loading-dot-color: var(--cnvs-sys-color-bg-alt-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-m1sr52;
  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);
}