Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Example
With custom indicator color
Installation
Components
Component | Built using | Source |
---|---|---|
Progress | Phlex |
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Progress(value: 50, class: "w-[60%]")
Progress(value: 35, class: "w-[60%] [&>*]:bg-success")
Run the install command
rails g ruby_ui:component Progress
1
Add RubyUI::Progress
to app/components/ruby_ui/progress.rb
# frozen_string_literal: true module RubyUI class Progress < Base def initialize(value: 0, **attrs) @value = value.to_f.clamp(0, 100) super(**attrs) end def view_template div(**attrs) do div(**indicator_attrs) end end private def default_attrs { role: "progressbar", aria_valuenow: @value, aria_valuemin: 0, aria_valuemax: 100, aria_valuetext: "#{@value}%", class: "relative h-2 overflow-hidden rounded-full bg-primary/20 [&>*]:bg-primary" } end def indicator_attrs { class: "h-full w-full flex-1", style: "transform: translateX(-#{100 - @value}%)" } end end end
Component | Built using | Source |
---|---|---|
Progress | Phlex |