Progress

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

Usage

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

<progress class="uk-progress" value="" max=""></progress>
Copy to clipboard
  • <progress
      id="js-progressbar"
      class="uk-progress"
      value="10"
      max="100"
    ></progress>
    
    <script>
      UIkit.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>

Theme development

On your tailwind.config.js file, add the Progress component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        progress: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-progress.uk-progress
hook-bar.uk-progress::-webkit-progress-value
hook-bar.uk-progress::-moz-progress-bar
hook-misc*