• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1//
2// Progress bars
3// --------------------------------------------------
4
5
6// Bar 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// Spec and IE10+
16@keyframes progress-bar-stripes {
17  from  { background-position: 40px 0; }
18  to    { background-position: 0 0; }
19}
20
21
22// Bar itself
23// -------------------------
24
25// Outer container
26.progress {
27  overflow: hidden;
28  height: @line-height-computed;
29  margin-bottom: @line-height-computed;
30  background-color: @progress-bg;
31  border-radius: @progress-border-radius;
32  .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
33}
34
35// Bar of progress
36.progress-bar {
37  float: left;
38  width: 0%;
39  height: 100%;
40  font-size: @font-size-small;
41  line-height: @line-height-computed;
42  color: @progress-bar-color;
43  text-align: center;
44  background-color: @progress-bar-bg;
45  .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
46  .transition(width .6s ease);
47}
48
49// Striped bars
50//
51// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
52// `.progress-bar-striped` class, which you just add to an existing
53// `.progress-bar`.
54.progress-striped .progress-bar,
55.progress-bar-striped {
56  #gradient > .striped();
57  background-size: 40px 40px;
58}
59
60// Call animation for the active one
61//
62// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
63// `.progress-bar.active` approach.
64.progress.active .progress-bar,
65.progress-bar.active {
66  .animation(progress-bar-stripes 2s linear infinite);
67}
68
69
70// Variations
71// -------------------------
72
73.progress-bar-success {
74  .progress-bar-variant(@progress-bar-success-bg);
75}
76
77.progress-bar-info {
78  .progress-bar-variant(@progress-bar-info-bg);
79}
80
81.progress-bar-warning {
82  .progress-bar-variant(@progress-bar-warning-bg);
83}
84
85.progress-bar-danger {
86  .progress-bar-variant(@progress-bar-danger-bg);
87}
88