Динамическая продолжительность для анимации SCSS на основе текущих атрибутов

Question

Я наткнулся на следующий индикатор выполнения. Тем не менее, я заметил, что импульсная анимация на компонентах панели имеет постоянную длительность, что означает, что она будет играть намного быстрее, чем дольше цветная полоса. Соответствующий (сокращенный) код выглядит следующим образом:

.progress {
    &__bar {
        animation: pulse 2s ease-out infinite;
    }
}

@keyframes pulse {
    0% {
        background-position: -50% center, right center, left center;
    }

    100% {
        background-position: 150% center, right center, left center;
    }
}

Используя короткий $bar.css({ width: percent + "%" }); планка растягивается и, таким образом, анимация пульса также ускоряется. Есть ли способ переписать анимацию, чтобы она всегда имела одинаковую скорость, независимо от длины индикатора выполнения?

Answer 1

Я разбудил ваш индикатор и сделал только некоторые изменения в scss. Я играл с обертками, абсолютным позиционированием и скрытием переполнения.

Я создал div class="progress__bar--bkg" а также @mixin innerBkg иметь дело с фоном только с фиксированной шириной и делением class="progress__bar--wrap" скрыть только переполнение фона (сначала я пытался без него, но overflow: hidden; затронуло также свечение текста и конца строки. Про последнее я поменял z-index: 1 за :before а также :after псевдо-элементы.