Renders a progress component.

Examples

<.progress value={50} />
<.progress value={75} size="2" color="green" />
<.progress value={25} variant="soft" radius="full" max={100} />

Props

• value - Current progress value (required)
• max - Maximum progress value (default: 100)
• variant - Progress variant: "classic", "surface", "soft" (default: "surface")
• size - Progress size: "1", "2", "3" (default: "2")
• color - Color theme (default: accent color)
• radius - Border radius: "none", "small", "medium", "large", "full" (default: "full")
• Plus margin props (m, mx, my, mt, mr, mb, ml)

Attributes

• color (:string) - Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. Must be one of "gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", or "sky".
• m (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mx (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• my (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mt (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mr (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mb (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• ml (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• radius (:string) - Border radius utility. Accepts: none, small, medium, large, full. Responsive supported. Must be one of "none", "small", "medium", "large", or "full".
• value (:integer) (required) - Current progress value.
• max (:integer) - Maximum progress value. Defaults to 100.
• variant (:string) - Progress variant. Defaults to "surface". Must be one of "classic", "surface", or "soft".
• size (:string) - Progress size. Defaults to "2". Must be one of "1", "2", or "3".
• class (:string) - Additional CSS classes. Defaults to nil.
• style (:string) - Additional inline styles. Defaults to nil.
• Global attributes are accepted.