Flowbite::Progress

Renders a progress bar indicating the completion of a task.

The progress value is clamped to the range 0 to 100 and used as the width of the bar.

The track is rendered with role=”progressbar” and the matching ARIA value attributes. The +label+, if given, is used as its accessible name. Pass +aria: “…”+ to name a progress bar without a visible label.

Basic usage

<%= render(Flowbite::Progress.new(progress: 45)) %>

With a custom style and size

<%= render(Flowbite::Progress.new(progress: 45, size: :lg, style: :success)) %>

With the label inside the bar

<%= render(Flowbite::Progress.new(label_position: :inside, progress: 45)) %>

With a label outside the bar

<%= render(Flowbite::Progress.new(label: "Flowbite", label_position: :outside, progress: 45)) %>

With an accessible name and no visible label

<%= render(Flowbite::Progress.new(aria: {label: "Upload progress"}, progress: 45)) %>

Examples

Sizes

Use the size argument to control the height of the progress bar.

Label Position

Show the progress percentage inside or outside the progress bar.

Styles

Use these progress bar styles to match the surrounding context.

Custom Styling

Add custom classes to the progress bar track.

API reference

Inherits from Flowbite

Constructor

def initialize(progress:, class: nil, label: nil, label_position: :none, size: :default, style: :brand, **options)

Parameters

`class`	String, Array<String>	Additional CSS classes for the track element.
`label`	String	Text to show next to the percentage when label_position is :outside. Also used as the accessible name of the progress bar.
`label_position`	Symbol	Where to show the percentage (:inside, :none, :outside).
`options`	Hash	Additional HTML options for the track element.
`progress`	Numeric	The progress in percent. Values outside the range 0 to 100 are clamped.
`size`	Symbol	The height of the progress bar (:sm, :default, :lg). Ignored when label_position is :inside.
`style`	Symbol	The color style of the bar (:brand, :danger, :dark, :success, :warning).