@vue-interface/activity-indicator/src/css/chase.css

An Vue activity indicator component.

@theme {
    --activity-indicator-chase-width: 2.5em;
    --activity-indicator-chase-height: 2.5em;
    --activity-indicator-chase-animation: activity-indicator-chase 2.5s infinite linear both;
    --activity-indicator-chase-display: inline-block;

    --activity-indicator-chase-dot-width: 100%;
    --activity-indicator-chase-dot-height: 100%;
    --activity-indicator-chase-dot-position: absolute;
    --activity-indicator-chase-dot-left: 0;
    --activity-indicator-chase-dot-top: 0;
    --activity-indicator-chase-dot-animation: activity-indicator-chase-dot 2.0s infinite ease-in-out both;

    --activity-indicator-chase-dot-before-content: '';
    --activity-indicator-chase-dot-before-display: block;
    --activity-indicator-chase-dot-before-width: 25%;
    --activity-indicator-chase-dot-before-height: 25%;
    --activity-indicator-chase-dot-before-bg: currentColor;
    --activity-indicator-chase-dot-before-border-radius: 100%;
    --activity-indicator-chase-dot-before-animation: activity-indicator-chase-dot-before 2.0s infinite ease-in-out both;

    --activity-indicator-chase-delay-1: -1.1s;
    --activity-indicator-chase-delay-2: -1.0s;
    --activity-indicator-chase-delay-3: -0.9s;
    --activity-indicator-chase-delay-4: -0.8s;
    --activity-indicator-chase-delay-5: -0.7s;
    --activity-indicator-chase-delay-6: -0.6s;

    --activity-indicator-chase-transform: rotate(360deg);
    --activity-indicator-chase-dot-before-scale-50: scale(0.4);
    --activity-indicator-chase-dot-before-scale-100: scale(1.0);
}

@utility activity-indicator-chase {
    display: var(--activity-indicator-chase-display);
    width: var(--activity-indicator-chase-width);
    height: var(--activity-indicator-chase-height);
    position: var(--activity-indicator-chase-position);
    animation: var(--activity-indicator-chase-animation);
}

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

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

    &:nth-child(1) {
        animation-delay: var(--activity-indicator-chase-delay-1);
        &:before {
            animation-delay: var(--activity-indicator-chase-delay-1);
        }
    }

    &:nth-child(2) {
        animation-delay: var(--activity-indicator-chase-delay-2);
        &:before {
            animation-delay: var(--activity-indicator-chase-delay-2);
        }
    }

    &:nth-child(3) {
        animation-delay: var(--activity-indicator-chase-delay-3);
        &:before {
            animation-delay: var(--activity-indicator-chase-delay-3);
        }
    }

    &:nth-child(4) {
        animation-delay: var(--activity-indicator-chase-delay-4);
        &:before {
            animation-delay: var(--activity-indicator-chase-delay-4);
        }
    }

    &:nth-child(5) {
        animation-delay: var(--activity-indicator-chase-delay-5);
        &:before {
            animation-delay: var(--activity-indicator-chase-delay-5);
        }
    }

    &:nth-child(6) {
        animation-delay: var(--activity-indicator-chase-delay-6);
        &:before {
            animation-delay: var(--activity-indicator-chase-delay-6);
        }
    }
}

@keyframes activity-indicator-chase {
    100% { transform: var(--activity-indicator-chase-transform); }
}

@keyframes activity-indicator-chase-dot {
    80%, 100% { transform: var(--activity-indicator-chase-transform); }
}

@keyframes activity-indicator-chase-dot-before {
    50% {
        transform: var(--activity-indicator-chase-dot-before-scale-50);
    }
    100%, 0% {
        transform: var(--activity-indicator-chase-dot-before-scale-100);
    }
}