.ik-loader-circle {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
}

.ik-loader-circle > svg {
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
}

.ik-loader-circle--indeterminate > svg {
    -webkit-animation: loader-circle-rotate 1.4s linear infinite;
    animation: loader-circle-rotate 1.4s linear infinite;
    transform-origin: center center;
    transition: all .2s ease-in-out;
}

.ik-loader-circle--indeterminate .ik-loader-circle__bar {
    -webkit-animation: loader-circle-dash 1.4s ease-in-out infinite;
    animation: loader-circle-dash 1.4s ease-in-out infinite;
    stroke-linecap: round;
    stroke-dasharray: 80, 200;
    stroke-dashoffset: 0;
}

.ik-loader-circle__bckg {
    stroke: hsla(0, 0%, 62%, .4);
    z-index: 1;
}

.ik-loader-circle__bar {
    stroke: currentColor;
    z-index: 2;
    transition: all .6s ease-in-out;
}

.ik-loader-circle--default {
    color: var(--on-background-color-1);
}

.ik-loader-circle--primary {
    color: var(--primary-color);
}

.ik-loader-circle--success {
    color: var(--success-color);
}

.ik-loader-circle--error {
    color: var(--error-color);
}

.ik-loader-circle--accent {
    color: var(--accent-color);
}

@-webkit-keyframes loader-circle-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -15;
    }
    to {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -125;
    }
}

@keyframes loader-circle-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -15px;
    }
    to {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -125px;
    }
}

@-webkit-keyframes loader-circle-rotate {
    to {
        transform: rotate(1turn);
    }
}

@keyframes loader-circle-rotate {
    to {
        transform: rotate(1turn);
    }
}