Адаптивно отображаемые элементы, не отображающие переходы

Question

Так что я обнаружил неудобство, когда вставлял индикаторы выполнения и анимировал ход события 'readystatechange' в jquery.Это только мой конкретный пример, но я считаю, что в целом это связано с переходами на скрытые элементы и последующим отображением элемента после того, как переход произошел.

Вот HTML-код индикатора выполнения в его начальном состоянии передсобытие запускается.

<div class="progress">
    <div class="progress-bar d-none d-xl-block" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Вот jquery для изменения стиля на основе readyState документа.

$(document).on('readystatechange', function(){
    if(document.readyState === 'interactive')
    {
        $('.progress-bar').css('width', "30%");
    } else if(document.readyState === 'complete') {
        $('.progress-bar').css('width', '100%');
    }
});

Проблема в том, что мне нужно скрыть этот элемент на мобильном телефонеустройств / планшетов и что при использовании классов

d-none d-xl-block

для элемента, который необходимо перенести, переход не отображается, даже если свойства через инспектор элементов отображаются правильно.Серый фон (по умолчанию) для

<div class="progress"></div>

показывает, но наложенный элемент,

<div class="progress-bar"></div>

не отображается.В инспекторе я вижу, что ширина .progress-bar правильно установлена ​​на «100%», а на дисплее - «блок».

Есть ли обходной путь, который стоит потратитьбудь то чистый CSS или JS или их смесь?

Использование Bootstrap 4, Firefox и jQuery 3.3.1 для справки.

edit: это работает, как и ожидалось, если просто установить отображение в 'block'на элементе .progress-bar, но не работает должным образом при скрытии / отображении элемента.