1//
2// Progress bars
3// --------------------------------------------------
4
5
6// ANIMATIONS
7// ----------
8
9// Webkit
10@-webkit-keyframes progress-bar-stripes {
11  from  { background-position: 40px 0; }
12  to    { background-position: 0 0; }
13}
14
15// Firefox
16@-moz-keyframes progress-bar-stripes {
17  from  { background-position: 40px 0; }
18  to    { background-position: 0 0; }
19}
20
21// IE9
22@-ms-keyframes progress-bar-stripes {
23  from  { background-position: 40px 0; }
24  to    { background-position: 0 0; }
25}
26
27// Opera
28@-o-keyframes progress-bar-stripes {
29  from  { background-position: 0 0; }
30  to    { background-position: 40px 0; }
31}
32
33// Spec
34@keyframes progress-bar-stripes {
35  from  { background-position: 40px 0; }
36  to    { background-position: 0 0; }
37}
38
39
40
41// THE BARS
42// --------
43
44// Outer container
45.progress {
46  overflow: hidden;
47  height: @baseLineHeight;
48  margin-bottom: @baseLineHeight;
49  #gradient > .vertical(#f5f5f5, #f9f9f9);
50  .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
51  .border-radius(@baseBorderRadius);
52}
53
54// Bar of progress
55.progress .bar {
56  width: 0%;
57  height: 100%;
58  color: @white;
59  float: left;
60  font-size: 12px;
61  text-align: center;
62  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
63  #gradient > .vertical(#149bdf, #0480be);
64  .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
65  .box-sizing(border-box);
66  .transition(width .6s ease);
67}
68.progress .bar + .bar {
69  .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
70}
71
72// Striped bars
73.progress-striped .bar {
74  #gradient > .striped(#149bdf);
75  .background-size(40px 40px);
76}
77
78// Call animation for the active one
79.progress.active .bar {
80  -webkit-animation: progress-bar-stripes 2s linear infinite;
81     -moz-animation: progress-bar-stripes 2s linear infinite;
82      -ms-animation: progress-bar-stripes 2s linear infinite;
83       -o-animation: progress-bar-stripes 2s linear infinite;
84          animation: progress-bar-stripes 2s linear infinite;
85}
86
87
88
89// COLORS
90// ------
91
92// Danger (red)
93.progress-danger .bar, .progress .bar-danger {
94  #gradient > .vertical(#ee5f5b, #c43c35);
95}
96.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
97  #gradient > .striped(#ee5f5b);
98}
99
100// Success (green)
101.progress-success .bar, .progress .bar-success {
102  #gradient > .vertical(#62c462, #57a957);
103}
104.progress-success.progress-striped .bar, .progress-striped .bar-success {
105  #gradient > .striped(#62c462);
106}
107
108// Info (teal)
109.progress-info .bar, .progress .bar-info {
110  #gradient > .vertical(#5bc0de, #339bb9);
111}
112.progress-info.progress-striped .bar, .progress-striped .bar-info {
113  #gradient > .striped(#5bc0de);
114}
115
116// Warning (orange)
117.progress-warning .bar, .progress .bar-warning {
118  #gradient > .vertical(lighten(@orange, 15%), @orange);
119}
120.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
121  #gradient > .striped(lighten(@orange, 15%));
122}
123