3 // --------------------------------------------------
6 // -------------------------
9 @-webkit-keyframes progress-bar-stripes {
11 background-position: 40px 0;
14 background-position: 0 0;
19 @keyframes progress-bar-stripes {
21 background-position: 40px 0;
24 background-position: 0 0;
29 // -------------------------
34 height: $line-height-computed;
35 margin-bottom: $line-height-computed;
36 background-color: $progress-bg;
37 border-radius: $progress-border-radius;
38 @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, .1));
46 font-size: $font-size-small;
47 line-height: $line-height-computed;
48 color: $progress-bar-color;
50 background-color: $progress-bar-bg;
51 @include box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .15));
52 @include transition(width .6s ease);
57 // `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
58 // `.progress-bar-striped` class, which you just add to an existing
60 .progress-striped .progress-bar,
61 .progress-bar-striped {
62 @include gradient-striped;
63 background-size: 40px 40px;
66 // Call animation for the active one
68 // `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
69 // `.progress-bar.active` approach.
70 .progress.active .progress-bar,
71 .progress-bar.active {
72 @include animation(progress-bar-stripes 2s linear infinite);
76 // -------------------------
78 .progress-bar-success {
79 @include progress-bar-variant($progress-bar-success-bg);
83 @include progress-bar-variant($progress-bar-info-bg);
86 .progress-bar-warning {
87 @include progress-bar-variant($progress-bar-warning-bg);
90 .progress-bar-danger {
91 @include progress-bar-variant($progress-bar-danger-bg);