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