December 12, 2017

UIkit Progress Bar

UIkit Progress Bar– To create progress bar add class uk-progress to <progress> element.

UIkit Progress Bar Example

Syntax for Progress bar-

Syntax:

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

Where value is progress bar value and max is the maximum allowed value for progress bar.

Example

Let us create a simple example using JavaScript.

Example:

<progress id="progressbar" class="uk-progress" value="5" max="100"></progress>

<script>

    UIkit.util.ready(function () {

        var barObj = document.getElementById('progressbar');

        var animate = setInterval(function () { 
            barObj.value += 5;
            if (barObj.value >= barObj.max) {
                clearInterval(animate);
            } 
            }, 1000);

    });

</script>

Try it »

If you run the above example it will produce output something like this-

UIkit Progress Bar Example