File: web/bundles/extjs/resources/theme-bootstrap/theme/stylesheets/bootstrap/default/widgets/_progress-bar.scss

// ANIMATIONS
// ----------

// Webkit
@-webkit-keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

// Firefox
@-moz-keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

// IE9
@-ms-keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

// Opera
@-o-keyframes progress-bar-stripes {
  from  { background-position: 0 0; }
  to    { background-position: 40px 0; }
}

// Spec
@keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

$striped-overlay:  linear-gradient(
    top right,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
);

/**
 * Creates the base structure of an Ext.ProgressBar
 * @member Ext.ProgressBar
 */
@mixin extjs-progress {
    .#{$prefix}progress {
        position: relative;

        @include border-radius($progress-border-radius);
        @include box-shadow($progress-box-shadow);
        overflow: hidden;

        height: $progress-height;
    }

    .#{$prefix}progress-bar {
        height: $progress-height;

        overflow: hidden;
        position: absolute;

        width: 0;

        @include border-radius($progress-border-radius);
        //border-right: 1px solid;
        //border-top: 1px solid;
    }

    .#{$prefix}progress-text {
        overflow: hidden;

        position: absolute;

        padding: 0 5px;

        height: $progress-height;

        font-weight: $progress-text-font-weight;
        font-size: $progress-text-font-size;
        line-height: $baseLineHeight;
        text-align: $progress-text-text-align;
        text-shadow: 0 -1px 1px $progress-text-color-back;
    }

    .#{$prefix}progress-text-back {
        padding-top: 1px;
        text-shadow: 0 -1px 1px $progress-text-color-front;

    }

    @if $include-ie or $compile-all {
        .#{$prefix}strict .#{$prefix}ie7m .#{$prefix}progress  {
            height: $progress-height;
        }
    }

    @include extjs-progress-ui(
        'default',

        $ui-background-color: $progress-background-color,
        $ui-background-gradient: $progress-background-gradient,

        $ui-bar-background-color: $progress-bar-default-background-color,
        $ui-bar-background-gradient: $progress-bar-default-background-gradient,

        $ui-color-front: $progress-text-color-front,
        $ui-color-back: $progress-text-color-back
    );

    @include extjs-progress-ui(
        'danger',

        $ui-background-color: $progress-background-color,
        $ui-background-gradient: $progress-background-gradient,

        $ui-bar-background-color: $progress-bar-danger-background-color,
        $ui-bar-background-gradient: $progress-bar-danger-background-gradient,

        $ui-color-front: $progress-text-color-front,
        $ui-color-back: $progress-text-color-back
    );

    @include extjs-progress-ui(
        'success',

        $ui-background-color: $progress-background-color,
        $ui-background-gradient: $progress-background-gradient,

        $ui-bar-background-color: $progress-bar-success-background-color,
        $ui-bar-background-gradient: $progress-bar-success-background-gradient,

        $ui-color-front: $progress-text-color-front,
        $ui-color-back: $progress-text-color-back
    );

    @include extjs-progress-ui(
        'info',

        $ui-background-color: $progress-background-color,
        $ui-background-gradient: $progress-background-gradient,

        $ui-bar-background-color: $progress-bar-info-background-color,
        $ui-bar-background-gradient: $progress-bar-info-background-gradient,

        $ui-color-front: $progress-text-color-front,
        $ui-color-back: $progress-text-color-back
    );

    @include extjs-progress-ui(
        'warning',

        $ui-background-color: $progress-background-color,
        $ui-background-gradient: $progress-background-gradient,

        $ui-bar-background-color: $progress-bar-warning-background-color,
        $ui-bar-background-gradient: $progress-bar-warning-background-gradient,

        $ui-color-front: $progress-text-color-front,
        $ui-color-back: $progress-text-color-back
    );
}

/**
 * Creates a visual theme for an Ext.ProgressBar
 * @member Ext.ProgressBar
 */
@mixin extjs-progress-ui(
    $ui-label,

    $ui-base-color: null,

    $ui-border-color: null,
    $ui-background-color: null,
    $ui-background-gradient: null,

    $ui-bar-background-color: null,
    $ui-bar-background-gradient: null,

    $ui-color-front: null,
    $ui-color-back: null
){
    @if $ui-base-color != null {
        @if $ui-border-color == null {         $ui-border-color: $ui-base-color; }
        @if $ui-bar-background-color == null { $ui-bar-background-color: $ui-base-color; }
        @if $ui-color-front == null {          $ui-color-front: lighten($ui-base-color, 60); }
        @if $ui-color-back == null {           $ui-color-back: darken($ui-base-color, 60); }
    }

    .#{$prefix}progress-#{$ui-label} {
        @if $ui-border-color != null { border-color: $ui-border-color; }
        @if $ui-background-gradient != null { @include background-gradient($ui-background-color, $ui-background-gradient); }

        .#{$prefix}progress-bar {
            @if $ui-bar-background-gradient != null { @include background-image($ui-bar-background-gradient); }
        }

        .#{$prefix}progress-text {
            @if $ui-color-front != null { color: $ui-color-front; }
        }

        .#{$prefix}progress-text-back {
            @if $ui-color-back != null { color: $ui-color-back; }
        }

        &.active {
            .#{$prefix}progress-bar {
                // Call animation for the active one
                -webkit-animation: progress-bar-stripes 2s linear infinite;
                -moz-animation: progress-bar-stripes 2s linear infinite;
                -ms-animation: progress-bar-stripes 2s linear infinite;
                -o-animation: progress-bar-stripes 2s linear infinite;
                animation: progress-bar-stripes 2s linear infinite;
            }
        }
        &.striped {
            .#{$prefix}progress-bar {
                @include background-image(
                    $striped-overlay,
                    $ui-bar-background-gradient
                );
                background-size: 40px 40px;
            }
        }
    }

    @if $ui-background-color != null {
        @if not $supports-gradients or $compile-all {
            .#{$prefix}nlg {
                .#{$prefix}progress-#{$ui-label} {
                    .#{$prefix}progress-bar {
                        background: repeat-x;
                        background-image: theme-background-image($theme-name, 'progress/progress-#{$ui-label}-bg.gif');
                    }
                }
            }
        }
    }
}