printing - Bootstrap - progress-bar is not shown in print preview

Question

I have made a simple example in JSFiddle, I will print out pages where Bootstrap progress bars are at page but if the print button is pressed the progress bar is not there. Does anyone know why?

<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
     <span class="sr-only">60% Complete</span>
   </div>
</div>

[EDIT] I have tried it like this but with no success New try

My example

Answer 1

This is because the browser doesn't print backgrounds (with default settings), but it prints borders and we can use it! I just added this in CSS for @media print (my LESS-CSS code):

@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;
        }
    }
}
}

Compiled CSS (with my variables):

@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;
}
}

Works like a charm in Bootstrap 3.