1 files changed, 170 insertions, 0 deletions
diff --git a/less/_progress.less b/less/_progress.less
new file mode 100644
index 000000000..4c34dbee9
--- /dev/null
+++ b/less/_progress.less
@@ -0,0 +1,170 @@
+/*csslint empty-rules: false, important: true*/
+
+//
+// Progress bars
+// --------------------------------------------------
+
+
+//
+// Progress animations
+//
+
+@-webkit-keyframes progress-bar-stripes {
+  from  { background-position: @line-height-computed 0; }
+  to    { background-position: 0 0; }
+}
+
+@keyframes progress-bar-stripes {
+  from  { background-position: @line-height-computed 0; }
+  to    { background-position: 0 0; }
+}
+
+
+//
+// Basic progress bar
+//
+
+.progress {
+  display: block;
+  width: 100%;
+  height: @line-height-computed;
+  margin-bottom: @line-height-computed;
+}
+.progress[value] {
+  // Reset the default appearance
+  appearance: none;
+  // Remove Firefox and Opera border
+  border: 0;
+  // IE10 uses `color` to set the bar background-color
+  color: #0074d9;
+}
+.progress[value]::-webkit-progress-bar {
+  background-color: #eee;
+  .border-radius(@border-radius-base);
+  .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
+}
+.progress[value]::-webkit-progress-value::before {
+  content: attr(value);
+}
+.progress[value]::-webkit-progress-value {
+  background-color: #0074d9;
+  border-top-left-radius: @border-radius-base;
+  border-bottom-left-radius: @border-radius-base;
+}
+.progress[value="0"]::-webkit-progress-value {
+  color: @gray-light;
+  min-width: 2rem;
+  background-color: transparent;
+  background-image: none;
+}
+.progress[value="100"]::-webkit-progress-value {
+  border-top-right-radius: @border-radius-base;
+  border-bottom-right-radius: @border-radius-base;
+}
+
+// Firefox styles must be entirely separate or it busts Webkit styles.
+/* Commented out for now because linter.
+@-moz-document url-prefix() {
+  .progress[value] {
+    background-color: #eee;
+    .border-radius(@border-radius-base);
+    .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
+  }
+  .progress[value]::-moz-progress-bar {
+    background-color: #0074d9;
+    border-top-left-radius: @border-radius-base;
+    border-bottom-left-radius: @border-radius-base;
+  }
+  .progress[value="0"]::-moz-progress-bar {
+    color: @gray-light;
+    min-width: 2rem;
+    background-color: transparent;
+    background-image: none;
+  }
+  .progress[value="100"]::-moz-progress-bar {
+    border-top-right-radius: @border-radius-base;
+    border-bottom-right-radius: @border-radius-base;
+  }
+}
+*/
+// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
+@media screen and (~"min-width:0\0") {
+  .progress {
+    background-color: #eee;
+    .border-radius(@border-radius-base);
+    .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
+  }
+  .progress-bar {
+    display: inline-block;
+    height: @line-height-computed;
+    text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
+    background-color: #0074d9;
+    border-top-left-radius: @border-radius-base;
+    border-bottom-left-radius: @border-radius-base;
+  }
+  .progress[width^="0"] {
+    color: @gray-light;
+    min-width: 2rem;
+    background-color: transparent;
+    background-image: none;
+  }
+  .progress[width="100%"] {
+    border-top-right-radius: @border-radius-base;
+    border-bottom-right-radius: @border-radius-base;
+  }
+}
+
+
+//
+// Striped
+//
+
+.progress-striped[value]::-webkit-progress-value {
+  #gradient > .striped();
+  background-size: @line-height-computed @line-height-computed;
+}
+.progress-striped[value]::-moz-progress-bar {
+  #gradient > .striped();
+  background-size: @line-height-computed @line-height-computed;
+}
+@media screen and (~"min-width:0\0") {
+  .progress-bar-striped {
+    #gradient > .striped();
+    background-size: @line-height-computed @line-height-computed;
+  }
+}
+
+
+//
+// Animated
+//
+
+.progress-animated[value]::-webkit-progress-value {
+  animation: progress-bar-stripes 2s linear infinite;
+}
+.progress-animated[value]::-moz-progress-bar {
+  animation: progress-bar-stripes 2s linear infinite;
+}
+@media screen and (~"min-width:0\0") {
+  .progress-animated .progress-bar-striped {
+    animation: progress-bar-stripes 2s linear infinite;
+  }
+}
+
+
+//
+// Variations
+//
+
+.progress-success {
+  .progress-variant(@progress-bar-success-bg);
+}
+.progress-info {
+  .progress-variant(@progress-bar-info-bg);
+}
+.progress-warning {
+  .progress-variant(@progress-bar-warning-bg);
+}
+.progress-danger {
+  .progress-variant(@progress-bar-danger-bg);
+}