Browser support
-
Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.
-
Opera does not support animations at this time.
+
Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.
+
Opera and IE do not support animations at this time.
diff --git a/docs/less.html b/docs/less.html
index 69b44da2da..29d6d753c1 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -654,47 +654,47 @@
- .#translucent > .background() |
+ #translucent > .background() |
@color: @white, @alpha: 1 |
Give an element a translucent background color |
- .#translucent > .border() |
+ #translucent > .border() |
@color: @white, @alpha: 1 |
Give an element a translucent border color |
- .#gradient > .vertical() |
+ #gradient > .vertical() |
@startColor, @endColor |
Create a cross-browser vertical background gradient |
- .#gradient > .horizontal() |
+ #gradient > .horizontal() |
@startColor, @endColor |
Create a cross-browser horizontal background gradient |
- .#gradient > .directional() |
+ #gradient > .directional() |
@startColor, @endColor, @deg |
Create a cross-browser directional background gradient |
- .#gradient > .vertical-three-colors() |
+ #gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Create a cross-browser three-color background gradient |
- .#gradient > .radial() |
+ #gradient > .radial() |
@innerColor, @outerColor |
Create a cross-browser radial background gradient |
- .#gradient > .striped() |
+ #gradient > .striped() |
@color, @angle |
Create a cross-browser striped background gradient |
- .#gradientBar() |
+ #gradientBar() |
@primaryColor, @secondaryColor |
Used for buttons to assign a gradient and slightly darker border |
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 849d905cad..c334c3aa37 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1694,7 +1694,7 @@
{{_i}}Striped{{/i}}
-
{{_i}}Uses a gradient to create a striped effect.{{/i}}
+
{{_i}}Uses a gradient to create a striped effect (no IE).{{/i}}
@@ -1707,7 +1707,7 @@
{{_i}}Animated{{/i}}
-
{{_i}}Takes the striped example and animates it.{{/i}}
+
{{_i}}Takes the striped example and animates it (no IE).{{/i}}
@@ -1762,8 +1762,8 @@
{{_i}}Browser support{{/i}}
-
{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.{{/i}}
-
{{_i}}Opera does not support animations at this time.{{/i}}
+
{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}
+
{{_i}}Opera and IE do not support animations at this time.{{/i}}
diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index 744861dea0..1ffb92b2ed 100644
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -578,47 +578,47 @@
- .#translucent > .background() |
+ #translucent > .background() |
@color: @white, @alpha: 1 |
{{_i}}Give an element a translucent background color{{/i}} |
- .#translucent > .border() |
+ #translucent > .border() |
@color: @white, @alpha: 1 |
{{_i}}Give an element a translucent border color{{/i}} |
- .#gradient > .vertical() |
+ #gradient > .vertical() |
@startColor, @endColor |
{{_i}}Create a cross-browser vertical background gradient{{/i}} |
- .#gradient > .horizontal() |
+ #gradient > .horizontal() |
@startColor, @endColor |
{{_i}}Create a cross-browser horizontal background gradient{{/i}} |
- .#gradient > .directional() |
+ #gradient > .directional() |
@startColor, @endColor, @deg |
{{_i}}Create a cross-browser directional background gradient{{/i}} |
- .#gradient > .vertical-three-colors() |
+ #gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
{{_i}}Create a cross-browser three-color background gradient{{/i}} |
- .#gradient > .radial() |
+ #gradient > .radial() |
@innerColor, @outerColor |
{{_i}}Create a cross-browser radial background gradient{{/i}} |
- .#gradient > .striped() |
+ #gradient > .striped() |
@color, @angle |
{{_i}}Create a cross-browser striped background gradient{{/i}} |
- .#gradientBar() |
+ #gradientBar() |
@primaryColor, @secondaryColor |
{{_i}}Used for buttons to assign a gradient and slightly darker border{{/i}} |
diff --git a/less/mixins.less b/less/mixins.less
index 47d467243b..5ff58a5c96 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -320,7 +320,7 @@
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor, endColorstr=@endColor, GradientType=1); // IE9 and down
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
}
.vertical(@startColor: #555, @endColor: #333) {
background-color: mix(@startColor, @endColor, 60%);
@@ -331,7 +331,7 @@
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(top, @startColor, @endColor); // The standard
background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor, endColorstr=@endColor, GradientType=0); // IE9 and down
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
}
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor;
@@ -351,7 +351,7 @@
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor, endColorstr=@endColor, GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
}
.radial(@innerColor: #555, @outerColor: #333) {
background-color: @outerColor;
diff --git a/less/progress-bars.less b/less/progress-bars.less
index a99b118a03..5979a36915 100644
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -17,6 +17,12 @@
to { background-position: 40px 0; }
}
+// IE9
+@-ms-keyframes progress-bar-stripes {
+ from { background-position: 0 0; }
+ to { background-position: 40px 0; }
+}
+
// Spec
@keyframes progress-bar-stripes {
from { background-position: 0 0; }