.spinner {
    width: var(--local-loader-size, var(--zd_size16));
    height: var(--local-loader-size, var(--zd_size16));
    display: block;
}

.spinnerTrack {
    fill: none;
    stroke: currentColor;
    opacity: 0.2;
    stroke-width: 3px;
}

.spinnerHead {
    fill: none;
    stroke: currentColor;
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 45;
    transform-origin: 50% 50%;
}

[dir=ltr] .spinnerHead {
    animation:  spin-ltr 0.9s linear infinite;
}

[dir=rtl] .spinnerHead {
    animation:  spin-rtl 0.9s linear infinite;
}

@keyframes spin-ltr {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-rtl {
    to {
        transform: rotate(-360deg);
    }
}