Progress bars

1 files changed, 100 insertions, 0 deletions

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