Progress bars

3 files changed, 117 insertions, 0 deletions

diff --git a/lib/bootstrap.less b/lib/bootstrap.less
index df233f128..0335f8651 100644
--- a/lib/bootstrap.less
+++ b/lib/bootstrap.less
@@ -30,6 +30,7 @@
 @import "wells.less";
 @import "component-animations.less";
 @import "close.less";
+@import "progress-bars.less";
 
 // Components: Nav
 @import "navbar.less";
diff --git a/lib/mixins.less b/lib/mixins.less
index 49eabb875..ea8d685f0 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -270,6 +270,15 @@
     background-repeat: no-repeat;
     // Opera cannot do radial gradients yet
   }
+  .striped(@color,@angle: -45deg) {
+    background-color: @color;
+    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
+    background-image: -webkit-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
+    background-image: -moz-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
+    background-image: -ms-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
+    background-image: -o-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
+    background-image: linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
+  }
 }
 
 // Reset filters for IE
@@ -320,3 +329,10 @@
     border-right: @arrowWidth solid @black;
   }
 }
+
+.background-size(@width, @height){
+  -webkit-background-size: @width @height;
+     -moz-background-size: @width @height;
+       -o-background-size: @width @height;
+          background-size: @width @height;
+}
diff --git a/lib/progress-bars.less b/lib/progress-bars.less
new file mode 100644
index 000000000..cc524cc9f
--- /dev/null
+++ b/lib/progress-bars.less
@@ -0,0 +1,100 @@
+@-webkit-keyframes progress-bar-stripes {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 40px 0;
+  }
+}
+
+@-moz-keyframes progress-bar-stripes {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 40px 0;
+  }
+}
+
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 40px 0;
+  }
+}
+
+.progress {
+  height: 25px;
+  margin-bottom: 18px;
+  overflow: hidden;
+  .box-shadow(inset 0 1px 1px 0 rgba(0,0,0,.3), 0 1px 0 0 #fff);
+  #gradient > .vertical(#fff, #f5f5f5);
+  .border-radius(10px);
+  border: 1px solid #ddd;
+  border-color: rgba(0,0,0,.0);
+  &.active {
+    .bar {
+      -webkit-animation: progress-bar-stripes 2s linear infinite;
+      -moz-animation: progress-bar-stripes 2s linear infinite;
+      animation: progress-bar-stripes 2s linear infinite;
+    }
+  }
+  &.animated {
+    .bar {
+      .transition(width .6s ease);
+    }
+  }
+  &.danger,
+  &.error {
+    .bar {
+      #gradient > .vertical(#ee5f5b, #c43c35);
+    }
+    &.striped {
+      .bar {
+        .background-size(40px, 40px);
+        #gradient > .striped(#ee5f5b);
+      }
+    }
+  }
+  &.success {
+    .bar {
+      #gradient > .vertical(#62c462, #57a957);
+    }
+    &.striped {
+      .bar {
+        .background-size(40px, 40px);
+        #gradient > .striped(#62c462);
+      }
+    }
+  }
+  &.info {
+    .bar {
+      #gradient > .vertical(#5bc0de, #339bb9);
+    }
+    &.striped {
+      .bar {
+        .background-size(40px, 40px);
+        #gradient > .striped(#5bc0de);
+      }
+    }
+  }
+  &.striped {
+    .bar {
+      .background-size(40px, 40px);
+      #gradient > .striped(#62c462);
+    }
+  }
+  .bar {
+    width: 0%;
+    height: 100%;
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
+    .gradientBar(#62c462, #57a957);
+    @shadow: inset 0 2px 0 rgba(255,255,255,.2), inset -1px -1px 0 rgba(0,0,0,.25),inset 1px 1px 0 rgba(0,0,0,.25);
+    .box-shadow(@shadow);
+    .border-radius(10px);
+  }
+}
\ No newline at end of file