From 2a43e7e78a59c70e217383c12c9ef0482cabb163 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Mar 2014 19:03:53 -0700 Subject: Break up docs into includes --- docs/_includes/components/progress-bars.html | 210 +++++++++++++++++++++++++++ 1 file changed, 210 insertions(+) create mode 100644 docs/_includes/components/progress-bars.html (limited to 'docs/_includes/components/progress-bars.html') diff --git a/docs/_includes/components/progress-bars.html b/docs/_includes/components/progress-bars.html new file mode 100644 index 000000000..a78e2c881 --- /dev/null +++ b/docs/_includes/components/progress-bars.html @@ -0,0 +1,210 @@ +
+

Progress bars

+ +

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

+ +
+

Cross-browser compatibility

+

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.

+
+ +

Basic example

+

Default progress bar.

+
+
+
+ 60% Complete +
+
+
+{% highlight html %} +
+
+ 60% Complete +
+
+{% endhighlight %} + +

With label

+

Remove the .sr-only class from within the progress bar to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.

+
+
+
+ 60% +
+
+
+{% highlight html %} +
+
+ 60% +
+
+{% endhighlight %} + +

Low percentages

+

Progress bars representing low single digit percentages, as well as 0%, include a min-width: 20px; for legibility.

+
+
+
+ 0% +
+
+
+
+ 2% +
+
+
+{% highlight html %} +
+
+ 0% +
+
+
+
+ 2% +
+
+{% endhighlight %} + + +

Contextual alternatives

+

Progress bars use some of the same button and alert classes for consistent styles.

+
+
+
+ 40% Complete (success) +
+
+
+
+ 20% Complete +
+
+
+
+ 60% Complete (warning) +
+
+
+
+ 80% Complete (danger) +
+
+
+{% highlight html %} +
+
+ 40% Complete (success) +
+
+
+
+ 20% Complete +
+
+
+
+ 60% Complete (warning) +
+
+
+
+ 80% Complete +
+
+{% endhighlight %} + +

Striped

+

Uses a gradient to create a striped effect. Not available in IE8.

+
+
+
+ 40% Complete (success) +
+
+
+
+ 20% Complete +
+
+
+
+ 60% Complete (warning) +
+
+
+
+ 80% Complete (danger) +
+
+
+{% highlight html %} +
+
+ 40% Complete (success) +
+
+
+
+ 20% Complete +
+
+
+
+ 60% Complete (warning) +
+
+
+
+ 80% Complete (danger) +
+
+{% endhighlight %} + +

Animated

+

Add .active to .progress-striped to animate the stripes right to left. Not available in IE9 and below.

+
+
+
45% Complete
+
+
+{% highlight html %} +
+
+ 45% Complete +
+
+{% endhighlight %} + +

Stacked

+

Place multiple bars into the same .progress to stack them.

+
+
+
+ 35% Complete (success) +
+
+ 20% Complete (warning) +
+
+ 10% Complete (danger) +
+
+
+{% highlight html %} +
+
+ 35% Complete (success) +
+
+ 20% Complete (warning) +
+
+ 10% Complete (danger) +
+
+{% endhighlight %} +
-- cgit v1.2.3