dootask/resources/assets/sass/components/loading.scss

.common-loading {
    transform-origin: center center;
    width: 30px;
    height: 30px;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    overflow: hidden;
    animation: loading-rotate 2s linear infinite;

    .common-path {
        fill: none;
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        stroke-linecap: round;
        animation: path-dash 1.5s ease-in-out infinite, path-color 6s ease-in-out infinite;
    }
}

.common-pureing {
    width: 30px;
    height: 30px;
    border: 3px solid #eeeeee;
    border-bottom-color: $primary-color;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: pureing-rotation 0.75s linear infinite;
}

@keyframes loading-rotate {
    to {
        transform: rotate(1turn)
    }
}

@keyframes path-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35
    }

    to {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124
    }
}

@keyframes path-color {
    0%, to {
        stroke: #d62d20
    }

    40% {
        stroke: #0057e7
    }

    66% {
        stroke: #008744
    }

    80%, 90% {
        stroke: #ffa700
    }
}

@keyframes pureing-rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}