@gravity-ui/uikit/build/cjs/components/Loader/Loader.css

Gravity UI base styling and components

@keyframes g-pulse {
  50% {
    opacity: 15%;
  }
}
.g-loader {
  display: inline-flex;
  align-items: center;
}
.g-loader__left, .g-loader__center, .g-loader__right {
  background: var(--g-color-base-brand);
  animation: g-pulse ease 800ms infinite;
}
.g-loader__left {
  animation-delay: 200ms;
}
.g-loader__center {
  animation-delay: 400ms;
}
.g-loader__right {
  animation-delay: 600ms;
}
.g-loader_size_s .g-loader__left {
  height: calc(20px / 1.5);
  width: 5px;
}
.g-loader_size_s .g-loader__center {
  width: 5px;
  height: 20px;
  margin-inline-start: 5px;
}
.g-loader_size_s .g-loader__right {
  height: calc(20px / 1.5);
  width: 5px;
  margin-inline-start: 5px;
}
.g-loader_size_m .g-loader__left {
  height: calc(28px / 1.5);
  width: 7px;
}
.g-loader_size_m .g-loader__center {
  width: 7px;
  height: 28px;
  margin-inline-start: 7px;
}
.g-loader_size_m .g-loader__right {
  height: calc(28px / 1.5);
  width: 7px;
  margin-inline-start: 7px;
}
.g-loader_size_l .g-loader__left {
  height: calc(36px / 1.5);
  width: 9px;
}
.g-loader_size_l .g-loader__center {
  width: 9px;
  height: 36px;
  margin-inline-start: 9px;
}
.g-loader_size_l .g-loader__right {
  height: calc(36px / 1.5);
  width: 9px;
  margin-inline-start: 9px;
}