.spinner {
    animation: spin 1000ms infinite alternate ease-in-out, grow 500ms infinite alternate ease-in-out;
    transform: rotate(-90deg);
    transform-origin: center;
}

@keyframes spin {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -95;
    }
}

@keyframes grow {
    from {
        stroke-dasharray: 1 100;
    }
    to {
        stroke-dasharray: 25 100;
    }
}

.chart-wrapper .spinner { 
    display: none;
}

.chart-wrapper.htmx-request .spinner {
    display: inline;
}

.chart-wrapper.htmx-request .chart {
    opacity: 0;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}