Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
  • Patrick H. Lauke's avatar
    Only change aria-pressed if it's not an input-based radio or checkbox group · 3f6e1faf
    Patrick H. Lauke authored 
    * Only change aria-pressed if it's not an input-based radio or checkbox group

aria-pressed="true"/aria-pressed="false" is really only useful for
making on/off toggles out of, say, `<button>` elements. the attribute is
useless (and potentially confusing/conflicting) on, say, `<label>`
elements for an existing `<input type="radio">` or similar.

* Add unit test for buttons.js and radio/checkbox inputs in button groups
    3f6e1faf
progress.md 2.52 KiB 
layout: page
title: Progress

Stylize the HTML5 <progress> element with a few extra classes and some crafty browser-specific CSS. Be sure to read up on the browser support.

Example

{% example html %} 0% 25% 50% 75% 100% {% endexample %}

IE9 support

Internet Explorer 9 doesn't support the HTML5 <progress> element, but we can work around that.

{% example html %}

25%
{% endexample %}

Contextual alternatives

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

{% example html %} 25% 50% 75% 100% {% endexample %}

Striped

Uses a gradient to create a striped effect.

{% example html %} 10% 25% 50% 75% 100% {% endexample %}

Animated stripes

The striped gradient can also be animated. Add .progress-animated to .progress to animate the stripes right to left via CSS3 animations.

Animated progress bars do not work in IE9 and Opera 12 as they don't support CSS3 animations.

25% Toggle animation

{% highlight html %} 25% {% endhighlight %}