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>
  • <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>