.fk-loader-container {
  position: relative;
  display: inline-block;
}
.fk-loader {
  --fk-loader-size: 48px;
  --fk-loader-small: 32px;
  --fk-loader-medium: 48px;
  --fk-loader-large: 64px;

  inset: 0;
  margin: auto;
  width: var(--fk-loader-size, var(--fk-loader-medium, 48px));
  height: var(--fk-loader-size, var(--fk-loader-medium, 48px));
  position: absolute;
  border-radius: 50%;
  background-color: var(--kendo-color-surface);
  background-color: transparent;
  animation: rotate-loader 0.875s linear infinite;
}
.fk-loader::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: calc(var(--fk-loader-size, 48px) / 8) solid;
  border-color: var(--kendo-color-primary);
  animation: clip-loader 2s linear alternate infinite;
}
.fk-loader::after {
  /* content: ""; */
  width: 8px;
  height: 8px;
  inset: 12px;
  position: absolute;
  border-radius: 50%;
  background-color: var(--kendo-color-primary-subtle-active);
}

@keyframes rotate-loader {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes clip-loader {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }
  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}