Progress

Ready Added in 2.0.0

Defines progress bars that indicate how far along a process is.

Usage

To apply this component, add the .gls-progress class to a <progress> element.

<progress class="gls-progress" value="" max=""></progress>

Preview
Markup

<progress id="js-progressbar" class="gls-progress" value="10" max="100"></progress>

<script>

    Gloss.util.ready(function () {

        var bar = document.getElementById('js-progressbar');

        var animate = setInterval(function () {

            bar.value += 10;

            if (bar.value >= bar.max) {
                clearInterval(animate);
            }

        }, 1000);

    });

</script>