diff --git a/controls.html b/controls.html
index 1f18bbc362c8ed7f839cf4d9d20260b4d107fa73..0b4a3e6f992dddaf978566438c908d3b2f26d254 100644
--- a/controls.html
+++ b/controls.html
@@ -244,4 +244,90 @@ base_url: "./"
+
+ 提供工作或动作的实时反馈,只用简单且灵活的进度条。
+
+
+
跨浏览器兼容性
+
进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持znimation属性。
+
+
+ 基本案例
+ 默认的进度条。
+
+
+ 有意义的替换
+ 为了一致的样式,进度条使用与按钮和警告框相同的类。
+
+
+ 40% Complete (success)
+
+
+
+
+
+ 60% Complete (warning)
+
+
+
+
+ 80% Complete (danger)
+
+
+
+ 条纹效果
+ 用一个渐变可以创建条纹效果,在IE8中不可用。
+
+
+ 40% Complete (success)
+
+
+
+
+
+ 60% Complete (warning)
+
+
+
+
+ 80% Complete (danger)
+
+
+
+ 运动效果
+ 给.progress-striped
加上.active
使它由右向左运动。在IE的所有版本不可用。
+
+
+ 堆叠效果
+ 把多个进度条放入同一个.progress
,使它们堆叠。
+
+
+ 35% Complete (success)
+
+
+ 20% Complete (warning)
+
+
+ 10% Complete (danger)
+
+
+
diff --git a/examples/progress.html b/examples/progress.html
new file mode 100644
index 0000000000000000000000000000000000000000..597dd59a0a593aea9dc65cc0cba0ad3a1758cd2a
--- /dev/null
+++ b/examples/progress.html
@@ -0,0 +1,99 @@
+
+
+
+
+ 提供工作或动作的实时反馈,只用简单且灵活的进度条。
+
+
+
跨浏览器兼容性
+
进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持znimation属性。
+
+
+ 基本案例
+ 默认的进度条。
+
+
+ 有意义的替换
+ 为了一致的样式,进度条使用与按钮和警告框相同的类。
+
+
+ 40% Complete (success)
+
+
+
+
+
+ 60% Complete (warning)
+
+
+
+
+ 80% Complete (danger)
+
+
+
+ 条纹效果
+ 用一个渐变可以创建条纹效果,在IE8中不可用。
+
+
+ 40% Complete (success)
+
+
+
+
+
+ 60% Complete (warning)
+
+
+
+
+ 80% Complete (danger)
+
+
+
+ 运动效果
+ 给.progress-striped
加上.active
使它由右向左运动。在IE的所有版本不可用。
+
+
+ 堆叠效果
+ 把多个进度条放入同一个.progress
,使它们堆叠。
+
+
+ 35% Complete (success)
+
+
+ 20% Complete (warning)
+
+
+ 10% Complete (danger)
+
+
+
+
+
+
+
+
diff --git a/src/less/basic/scaffolding.less b/src/less/basic/scaffolding.less
index 74be2296159ba60bf55034c54a8ee015b0870395..9fa499ac19509539397012fc564b3e13342cd677 100644
--- a/src/less/basic/scaffolding.less
+++ b/src/less/basic/scaffolding.less
@@ -3,3 +3,17 @@
// --------------------------------------------------
*, *:before, *:after { .box-sizing(border-box); }
+
+// Only display content to screen readers
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ padding: 0;
+ overflow: hidden;
+ clip: rect(0 0 0 0);
+ border: 0;
+}
diff --git a/src/less/basic/variables.less b/src/less/basic/variables.less
index 145f3514378f9dacfb62d5ccf6f69fdb6e67ef05..66efe410bff94046700a86a781bce694801b74d3 100644
--- a/src/less/basic/variables.less
+++ b/src/less/basic/variables.less
@@ -183,4 +183,15 @@
@btn-info-bg: @color-info;
@btn-info-border: darken(@btn-info-bg, 5%);
-@btn-link-disabled-color: @gray-light;
\ No newline at end of file
+@btn-link-disabled-color: @gray-light;
+
+// Progress bars
+// -------------------------
+@progress-bg: #f5f5f5;
+@progress-bar-color: #fff;
+
+@progress-bar-bg: @color-primary;
+@progress-bar-success-bg: @color-success;
+@progress-bar-warning-bg: @color-warning;
+@progress-bar-danger-bg: @color-danger;
+@progress-bar-info-bg: @color-info;
diff --git a/src/less/controls/progress-bars.less b/src/less/controls/progress-bars.less
new file mode 100644
index 0000000000000000000000000000000000000000..7ded8332f92a7722a63ec0ea4ebcde387ad2f189
--- /dev/null
+++ b/src/less/controls/progress-bars.less
@@ -0,0 +1,92 @@
+//
+// Progress bars
+// --------------------------------------------------
+
+
+// Bar animations
+// -------------------------
+
+// Webkit
+@-webkit-keyframes progress-bar-stripes
+{
+ from { background-position: 40px 0; }
+ to { background-position: 0 0; }
+}
+
+// Firefox
+@-moz-keyframes progress-bar-stripes
+{
+ from { background-position: 40px 0; }
+ to { background-position: 0 0; }
+}
+
+// Opera
+@-o-keyframes progress-bar-stripes
+{
+ from { background-position: 0 0; }
+ to { background-position: 40px 0; }
+}
+
+// Spec and IE10+
+@keyframes progress-bar-stripes
+{
+ from { background-position: 40px 0; }
+ to { background-position: 0 0; }
+}
+
+
+
+// Bar itself
+// -------------------------
+
+// Outer container
+.progress
+{
+ overflow: hidden;
+ height: @line-height-computed;
+ margin-bottom: @line-height-computed;
+ background-color: @progress-bg;
+ border-radius: @border-radius-base;
+ .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
+}
+
+// Bar of progress
+.progress-bar
+{
+ float: left;
+ width: 0%;
+ height: 100%;
+ font-size: @font-size-small;
+ color: @progress-bar-color;
+ text-align: center;
+ background-color: @progress-bar-bg;
+ .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
+ .transition(width .6s ease);
+}
+
+// Striped bars
+.progress-striped .progress-bar
+{
+ #gradient > .striped(@progress-bar-bg);
+ background-size: 40px 40px;
+}
+
+// Call animation for the active one
+.progress.active .progress-bar
+{
+ -webkit-animation: progress-bar-stripes 2s linear infinite;
+ -moz-animation: progress-bar-stripes 2s linear infinite;
+ -ms-animation: progress-bar-stripes 2s linear infinite;
+ -o-animation: progress-bar-stripes 2s linear infinite;
+ animation: progress-bar-stripes 2s linear infinite;
+}
+
+
+
+// Variations
+// -------------------------
+
+.progress-bar-success { .progress-bar-variant(@progress-bar-success-bg); }
+.progress-bar-info { .progress-bar-variant(@progress-bar-info-bg); }
+.progress-bar-warning { .progress-bar-variant(@progress-bar-warning-bg); }
+.progress-bar-danger { .progress-bar-variant(@progress-bar-danger-bg); }
diff --git a/src/less/zui.less b/src/less/zui.less
index 67a99aa7286924460640831ccb2b26307c127708..389b09c9562ebf1e29c86eff8840d75357d3e73e 100644
--- a/src/less/zui.less
+++ b/src/less/zui.less
@@ -26,4 +26,5 @@
// CONTROLS
// --------------------------------------------------
-@import "controls/buttons.less";
\ No newline at end of file
+@import "controls/buttons.less";
+@import "controls/progress-bars.less";