For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/progress.md.
A3S UI
  • English
  • next

      • Progress

      Live previewHTML · CSS · JavaScript

      Usage

      Include CSS

      Import Tailwind and one full A3S UI style bundle.

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      Or import only the base CSS, Progress component CSS, and one style pack.

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/progress.css";
@import "@a3s-lab/ui/styles/a3s.css";

      Using CDN or bundler imports? See the Installation page.

      Add your progress HTML

      Add class="progress" and role="progressbar" to the root. Use one child <span> as the visual indicator.

      <div class="progress" role="progressbar" aria-label="Loading" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100">
  <span style="width: 66%"></span>
</div>

      HTML structure

      <div class="progress" role="progressbar">
      Progress root. Set aria-label or aria-labelledby, plus aria-valuenow, aria-valuemin, and aria-valuemax.
      <span style="width: ...">
      Visual indicator. Its width should match the current value.

      Examples

      Label

      Live previewHTML · CSS · JavaScript
      66%

      RTL

      Progress supports dir="rtl" on the root or a parent.

      Live previewHTML · CSS · JavaScript