@vue-interface/activity-indicator/src/css/circle-trail.css

An Vue activity indicator component.

@theme {
    --activity-indicator-circle-trail-width: 2.5em;
    --activity-indicator-circle-trail-height: 2.5em;
    --activity-indicator-circle-trail-position: relative;

    --activity-indicator-child-width: 100%;
    --activity-indicator-child-height: 100%;
    --activity-indicator-child-position: absolute;
    --activity-indicator-child-left: 0;
    --activity-indicator-child-top: 0;

    --activity-indicator-child-before-content: '';
    --activity-indicator-child-before-display: block;
    --activity-indicator-child-before-margin: 0 auto;
    --activity-indicator-child-before-width: 0.4em;
    --activity-indicator-child-before-height: 0.4em;
    --activity-indicator-child-before-bg: currentColor;
    --activity-indicator-child-before-border-radius: 100%;
    --activity-indicator-child-before-animation: activity-indicator-circle-trail 1.2s infinite ease-in-out both;

    --trail-transform-2: rotate(30deg);
    --trail-delay-2: -1.1s;

    --trail-transform-3: rotate(60deg);
    --trail-delay-3: -1.0s;

    --trail-transform-4: rotate(90deg);
    --trail-delay-4: -0.9s;

    --trail-transform-5: rotate(120deg);
    --trail-delay-5: -0.8s;

    --trail-transform-6: rotate(150deg);
    --trail-delay-6: -0.7s;

    --trail-transform-7: rotate(180deg);
    --trail-delay-7: -0.6s;

    --trail-transform-8: rotate(210deg);
    --trail-delay-8: -0.5s;

    --trail-transform-9: rotate(240deg);
    --trail-delay-9: -0.4s;

    --trail-transform-10: rotate(270deg);
    --trail-delay-10: -0.3s;

    --trail-transform-11: rotate(300deg);
    --trail-delay-11: -0.2s;

    --trail-transform-12: rotate(330deg);
    --trail-delay-12: -0.1s;

    --activity-indicator-circle-trail-scale-0: scale(0);
    --activity-indicator-circle-trail-scale-1: scale(1);
}

@utility activity-indicator-circle-trail {
    width: var(--activity-indicator-circle-trail-width);
    height: var(--activity-indicator-circle-trail-height);
    position: var(--activity-indicator-circle-trail-position);
}

@utility activity-indicator-child {
    width: var(--activity-indicator-child-width);
    height: var(--activity-indicator-child-height);
    position: var(--activity-indicator-child-position);
    left: var(--activity-indicator-child-left);
    top: var(--activity-indicator-child-top);

    &:before {
        content: var(--activity-indicator-child-before-content);
        display: var(--activity-indicator-child-before-display);
        margin: var(--activity-indicator-child-before-margin);
        width: var(--activity-indicator-child-before-width);
        height: var(--activity-indicator-child-before-height);
        background-color: var(--activity-indicator-child-before-bg);
        border-radius: var(--activity-indicator-child-before-border-radius);
        animation: var(--activity-indicator-child-before-animation);
    }
}

@utility activity-indicator-circle-trail2 {
    transform: var(--trail-transform-2);
    &:before {
        animation-delay: var(--trail-delay-2);
    }
}

@utility activity-indicator-circle-trail3 {
    transform: var(--trail-transform-3);
    &:before {
        animation-delay: var(--trail-delay-3);
    }
}

@utility activity-indicator-circle-trail4 {
    transform: var(--trail-transform-4);
    &:before {
        animation-delay: var(--trail-delay-4);
    }
}

@utility activity-indicator-circle-trail5 {
    transform: var(--trail-transform-5);
    &:before {
        animation-delay: var(--trail-delay-5);
    }
}

@utility activity-indicator-circle-trail6 {
    transform: var(--trail-transform-6);
    &:before {
        animation-delay: var(--trail-delay-6);
    }
}

@utility activity-indicator-circle-trail7 {
    transform: var(--trail-transform-7);
    &:before {
        animation-delay: var(--trail-delay-7);
    }
}

@utility activity-indicator-circle-trail8 {
    transform: var(--trail-transform-8);
    &:before {
        animation-delay: var(--trail-delay-8);
    }
}

@utility activity-indicator-circle-trail9 {
    transform: var(--trail-transform-9);
    &:before {
        animation-delay: var(--trail-delay-9);
    }
}

@utility activity-indicator-circle-trail10 {
    transform: var(--trail-transform-10);
    &:before {
        animation-delay: var(--trail-delay-10);
    }
}

@utility activity-indicator-circle-trail11 {
    transform: var(--trail-transform-11);
    &:before {
        animation-delay: var(--trail-delay-11);
    }
}

@utility activity-indicator-circle-trail12 {
    transform: var(--trail-transform-12);
    &:before {
        animation-delay: var(--trail-delay-12);
    }
}

@keyframes activity-indicator-circle-trail {
    0%, 80%, 100% {
        transform: var(--activity-indicator-circle-trail-scale-0);
    }
    40% {
        transform: var(--activity-indicator-circle-trail-scale-1);
    }
}