Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
  • Fabrizio Castellarin's avatar
    Use a more sophisticated template for end-to-end testing. (#1187) · 9099570b
    Fabrizio Castellarin authored 
    * Use a more sophisticated template for end-to-end testing.

* Not publish integration tests to npm

* Use "commander" for  cli argv handling

* Handle different scripts version forms and exits without a name given

* Prepare the commands for testing with a template

* Fix dev "template" path

* Add various features to test

* Test various features separately

* Test language features

* Comment unused e2e.sh lines

* Add "development" tests

* Test environment variables

* Test webpack plugins

* Replace kitchensink README

* Switch integration tests from jest to mocha

* Use `fs-extra`

* Use the correct folders

* Do some cleanup

* Print a better message for `--template`

* Test `npm start` with and without https

* Separate fast e2e testing from kitchensink testing

* Hide `--internal-testing-template` (former `--template`) CLI option
    9099570b
progress.md 2.62 KiB 
layout: docs
title: Progress
group: components

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.

Contents

  • Will be replaced with the ToC, excluding the "Contents" header {:toc}

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