diff --git a/docs/_includes/components/progress-bars.html b/docs/_includes/components/progress-bars.html new file mode 100644 index 000000000000..13b76539ac31 --- /dev/null +++ b/docs/_includes/components/progress-bars.html @@ -0,0 +1,214 @@ +
+

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.

+
+ +
+

Content Security Policy (CSP) compatibility

+

If your website has a Content Security Policy (CSP) which doesn't allow style-src 'unsafe-inline', then you won't be able to use inline style attributes to set progress bar widths as shown in our examples below. Alternative methods for setting the widths that are compatible with strict CSPs include using a little custom JavaScript (that sets element.style.width) or using custom CSS classes.

+
+ +

Basic example

+

Default progress bar.

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

With label

+

Remove the <span> with .sr-only class from within the progress bar to show a visible percentage.

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

To ensure that the label text remains legible even for low percentages, consider adding a min-width to the progress bar.

+
+
+
+ 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 (danger) +
+
+{% endhighlight %} + +

Striped

+

Uses a gradient to create a striped effect. Not available in IE9 and below.

+
+
+
+ 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-bar-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 %} +