SutraUI.Progress (Sutra UI v0.3.0)

View Source

Displays an indicator showing the completion progress of a task.

The progress bar displays a visual indicator of task completion. The value should be between 0 and 100.

Examples

<.progress value={33} />

<.progress value={66} size="lg" />

<.progress value={@upload_progress} aria_label="Upload progress" />

Accessibility

  • Uses role="progressbar" for screen readers
  • Includes aria-valuemin, aria-valuemax, and aria-valuenow
  • Optional aria_label for additional context

Summary

Functions

progress(assigns)

Renders a progress bar component.

Functions

progress(assigns)

Renders a progress bar component.

Attributes

  • value (:integer) - Progress value from 0 to 100. Defaults to 0.
  • size (:string) - The size of the progress bar. Defaults to "default". Must be one of "default", "sm", "lg", or "xl".
  • class (:string) - Additional CSS classes. Defaults to nil.
  • aria_label (:string) - Accessible label for screen readers. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["id"].