:root
{
  --color-bg: #0e0b14;
  --color-surface: #171321;

  --color-primary: #AF35AF;
  --color-primary-hover: #C94BC9;

  --color-text: #EDE7F6;
  --color-text-muted: #9B8AAE;

  --gradient-primary: linear-gradient(135deg, #FE6DFE, #AF35AF);

  --color-border: #26213A;

  --color-gray: #848484;
}

.loader{
  display: inline-block; /* важно */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite;
}

.loader::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid var(--color-primary);
    animation: prixClipFix 2s linear infinite ;
}

.center-block
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

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

@keyframes prixClipFix {
    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)}
}