Bootstrap 3 - печать цветов на индикаторах выполнения?

Чтобы основываться на предыдущем ответе, у меня есть настройка CSS для печати из Chrome или IE. FireFox по-прежнему не работает. Однако вам нужно будет настроить цвет каждой полосы... информация, успех и т. д.

        @media print{       
            .progress{
                background-color: #F5F5F5 !important;
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F5F5F5', endColorstr='#F5F5F5')" !important;
            }
            .progress-bar-info{
                display: block !important;
                background-color: #5BC0DE !important;
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5BC0DE', endColorstr='#5BC0DE')" !important;
            }

            .progress, .progress > .progress-bar {
                display: block !important;
                -webkit-print-color-adjust: exact !important;

                box-shadow: inset 0 0 !important;
                -webkit-box-shadow: inset 0 0 !important;
            }   
        }

Ссылка: проблемы печати CSS @media с фоновым цветом;

Помимо -webkit-print-color-adjust: точно; для б.э. .progress-bar-success вам также нужно будет сделать фон видимым. Вы можете сделать это, добавив !important в правила ccs, см.: Цвет фона не отображается в режиме предварительного просмотра

Добавьте/привяжите другой стиль печати к @media print в другой таблице стилей.

Для печати границ/теней индикатора выполнения также добавьте !important в свойства рамки. См. также: Удалить тень из печатной версии и text-shadow и box-shadow при печати (Chrome)

Это потому, что браузер не печатает фон (с настройками по умолчанию), но печатает границы, и мы можем это использовать! Просто попробуйте это https://stackoverflow.com/a/46216102/8601222

Отредактировано после комментариев

Вы можете добавить это для печати @media (мой код LESS-CSS):

@media print {
.progress {
    position: relative;
    &:before {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        border-bottom: @line-height-computed solid @gray-lighter;
    }
    &-bar {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        border-bottom: @line-height-computed solid @brand-primary;
        &-success {
            border-bottom-color: @brand-success;
        }
        &-info {
            border-bottom-color: @brand-info;
        }
        &-warning {
            border-bottom-color: @brand-warning;
        }
        &-danger {
            border-bottom-color: @brand-danger;
        }
    }
}
}

Скомпилированный CSS (с моими переменными):

@media print {
.progress {
    position: relative;
}
.progress:before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    border-bottom: 2rem solid #eeeeee;
}
.progress-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    border-bottom: 2rem solid #337ab7;
}
.progress-bar-success {
    border-bottom-color: #67c600;
}
.progress-bar-info {
    border-bottom-color: #5bc0de;
}
.progress-bar-warning {
    border-bottom-color: #f0a839;
}
.progress-bar-danger {
    border-bottom-color: #ee2f31;
}
}

Работает как шарм в Bootstrap 3.