Progress Bar(ui_progress_bar)Bootstrap Logo

UiBibz::Ui::Core::Notifications::ProgressBar

Examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

# by variable
ui_progress_bar content, options, html_options

# or by block
ui_progress_bar options, html_options do
  content
end

# or by block with tap
ui_progress_bar options, html_options do |pb|
  pb.bar content, options, html_options
  # or
  pb.bar options, html_options do
    content
  end
end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • animated[boolean]
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • popover[string/hash](use component popover method)
  • state[symbol](:disabled, :active)(use component state method)
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • statuses[boolean/array]
  • striped[boolean]
  • target[string](use component stimulus-options method)
  • tooltip[string/hash](use component tooltip method)
  • turbo[string](use component turbo method)
  • value[number]

Items

The allowed items for this component are:
  • bar(inherit of component)
  • html[html/string]Insert html as a component

Examples

Some examples explain how to use the options present in the component.

Progress Bar

0.0%
25%
50%
ui_progress_bar 0
 
ui_progress_bar "25%", { status: :primary, value: 25 }, { class: "my-progress" }
 
ui_progress_bar({ status: :primary, value: 50 }, { class: "my-progress"}) do
  50%
end

<div class="progress">
  <div class="progress-bar" aria-valuenow="0.0" aria-valuemin="0" aria-valuemax="100" style="width: 0.0%" role="progressbar"></div>
</div>
<div class="my-progress progress">
  <div class="bg-primary progress-bar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%" role="progressbar"></div>
</div>
<div class="my-progress progress">
  <div class="bg-primary progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%" role="progressbar"></div></div>
</div>

status

10.0%
25.0%
50.0%
75.0%
100.0%
ui_progress_bar 10, status: :primary
ui_progress_bar 25, status: :success
ui_progress_bar 50, status: :warning
ui_progress_bar 75, status: :danger
ui_progress_bar 100, status: :info

<div class="progress">
  <div class="bg-primary progress-bar" aria-valuenow="10.0" aria-valuemin="0" aria-valuemax="100" style="width: 10.0%" role="progressbar"></div>
</div>
<div class="progress">
  <div class="bg-success progress-bar" aria-valuenow="25.0" aria-valuemin="0" aria-valuemax="100" style="width: 25.0%" role="progressbar"></div>
</div>
<div class="progress">
  <div class="bg-warning progress-bar" aria-valuenow="50.0" aria-valuemin="0" aria-valuemax="100" style="width: 50.0%" role="progressbar"></div>
</div>
<div class="progress">
  <div class="bg-danger progress-bar" aria-valuenow="75.0" aria-valuemin="0" aria-valuemax="100" style="width: 75.0%" role="progressbar"></div>
</div>
<div class="progress">
  <div class="bg-info progress-bar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%" role="progressbar"></div>
</div>

Line

10.0%
25.0%
50.0%
75.0%
100.0%
ui_progress_bar 10, status: :primary, line: true
ui_progress_bar 25, status: :success, line: true
ui_progress_bar 50, status: :warning, line: true
ui_progress_bar 75, status: :danger, line: true
ui_progress_bar 100, status: :info, line: true

<div class="progress progress-bar-line">
  <div class="bg-primary progress-bar" aria-valuenow="10.0" aria-valuemin="0" aria-valuemax="100" style="width: 10.0%" role="progressbar"></div>
</div>
<div class="progress progress-bar-line">
  <div class="bg-success progress-bar" aria-valuenow="25.0" aria-valuemin="0" aria-valuemax="100" style="width: 25.0%" role="progressbar"></div>
</div>
<div class="progress progress-bar-line">
  <div class="bg-warning progress-bar" aria-valuenow="50.0" aria-valuemin="0" aria-valuemax="100" style="width: 50.0%" role="progressbar"></div>
</div>
<div class="progress progress-bar-line">
  <div class="bg-danger progress-bar" aria-valuenow="75.0" aria-valuemin="0" aria-valuemax="100" style="width: 75.0%" role="progressbar"></div>
</div>
<div class="progress progress-bar-line">
  <div class="bg-info progress-bar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%" role="progressbar"></div>
</div>

Striped

10.0%
25.0%
50.0%
75.0%
100.0%
ui_progress_bar 10, status: :primary, striped: true
ui_progress_bar 25, status: :success, striped: true
ui_progress_bar 50, status: :warning, striped: true
ui_progress_bar 75, status: :danger, striped: true
ui_progress_bar 100, status: :info, striped: true

<div class="progress">
  <div class="bg-primary progress-bar progress-bar-striped" aria-valuenow="10.0" aria-valuemin="0" aria-valuemax="100" style="width: 10.0%" role="progressbar"></div>
</div>
<div class="progress">
  <div class="bg-success progress-bar progress-bar-striped" aria-valuenow="25.0" aria-valuemin="0" aria-valuemax="100" style="width: 25.0%" role="progressbar"></div>
</div>
<div class="progress">
  <div class="bg-warning progress-bar progress-bar-striped" aria-valuenow="50.0" aria-valuemin="0" aria-valuemax="100" style="width: 50.0%" role="progressbar"></div>
</div>
<div class="progress">
  <div class="bg-danger progress-bar progress-bar-striped" aria-valuenow="75.0" aria-valuemin="0" aria-valuemax="100" style="width: 75.0%" role="progressbar"></div>
</div>
<div class="progress">
  <div class="bg-info progress-bar progress-bar-striped" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%" role="progressbar"></div>
</div>

Animated

10.0%
25.0%
50.0%
75.0%
100.0%
ui_progress_bar 10, status: :primary, striped: true, animated: true
ui_progress_bar 25, status: :success, striped: true, animated: true
ui_progress_bar 50, status: :warning, striped: true, animated: true
ui_progress_bar 75, status: :danger, striped: true, animated: true
ui_progress_bar 100, status: :info, striped: true, animated: true

<div class="progress">
  <div class="bg-primary progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="10.0" aria-valuemin="0" aria-valuemax="100" style="width: 10.0%" role="progressbar"></div>
</div>
<div class="progress">
  <div class="bg-success progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="25.0" aria-valuemin="0" aria-valuemax="100" style="width: 25.0%" role="progressbar"></div>
</div>
<div class="progress">
  <div class="bg-warning progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="50.0" aria-valuemin="0" aria-valuemax="100" style="width: 50.0%" role="progressbar"></div>
</div>
<div class="progress">
  <div class="bg-danger progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="75.0" aria-valuemin="0" aria-valuemax="100" style="width: 75.0%" role="progressbar"></div>
</div>
<div class="progress">
  <div class="bg-info progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%" role="progressbar"></div>
</div>

Stacked

7.4%
15.3%
21.1%
25.9%
30.3%
7.4%
15.3%
21.1%
25.9%
30.3%
7.4%
15.3%
21.1%
12.173%
ui_progress_bar 100, stacked: true, striped: true, animated: true
ui_progress_bar 100, stacked: true, inverse: true
ui_progress_bar 47, stacked: true

<div class="progress">
  <div class="bg-success progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="7.4" aria-valuemin="0" aria-valuemax="100" style="width: 7.4%" role="progressbar"></div>
  <div class="bg-primary progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="15.3" aria-valuemin="0" aria-valuemax="100" style="width: 15.3%" role="progressbar"></div>
  <div class="bg-info progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="21.1" aria-valuemin="0" aria-valuemax="100" style="width: 21.1%" role="progressbar"></div>
  <div class="bg-warning progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="25.9" aria-valuemin="0" aria-valuemax="100" style="width: 25.9%" role="progressbar"></div>
  <div class="bg-danger progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="30.3" aria-valuemin="0" aria-valuemax="100" style="width: 30.3%" role="progressbar"></div>
</div>

<div class="progress">
  <div class="bg-danger progress-bar" aria-valuenow="7.4" aria-valuemin="0" aria-valuemax="100" style="width: 7.4%" role="progressbar"></div>
  <div class="bg-warning progress-bar" aria-valuenow="15.3" aria-valuemin="0" aria-valuemax="100" style="width: 15.3%" role="progressbar"></div>
  <div class="bg-info progress-bar" aria-valuenow="21.1" aria-valuemin="0" aria-valuemax="100" style="width: 21.1%" role="progressbar"></div>
  <div class="bg-primary progress-bar" aria-valuenow="25.9" aria-valuemin="0" aria-valuemax="100" style="width: 25.9%" role="progressbar"></div>
  <div class="bg-success progress-bar" aria-valuenow="30.3" aria-valuemin="0" aria-valuemax="100" style="width: 30.3%" role="progressbar"></div>
</div>

<div class="progress">
  <div class="bg-success progress-bar" aria-valuenow="7.4" aria-valuemin="0" aria-valuemax="100" style="width: 7.4%" role="progressbar"></div>
  <div class="bg-primary progress-bar" aria-valuenow="15.3" aria-valuemin="0" aria-valuemax="100" style="width: 15.3%" role="progressbar"></div>
  <div class="bg-info progress-bar" aria-valuenow="21.1" aria-valuemin="0" aria-valuemax="100" style="width: 21.1%" role="progressbar"></div>
  <div class="bg-warning progress-bar" aria-valuenow="12.173" aria-valuemin="0" aria-valuemax="100" style="width: 12.173%" role="progressbar"></div>
</div>

Progress bar with statuses

Status changes according to the percentage of progression.
[:success, :primary, :info, :warning, :danger]
You can pass our status array in statuses option. Percentage will be divided by the number of elements in statuses array.

10.0%
34.0%
45.0%
62.0%
83.0%
49.0%
ui_progress_bar 10, statuses: true
ui_progress_bar 34, statuses: true
ui_progress_bar 45, statuses: true
ui_progress_bar 62, statuses: true
ui_progress_bar 83, statuses: true
ui_progress_bar 49, statuses: [:primary, :danger]

<div class="progress"><div class="bg-success progress-bar" aria-valuenow="10.0" aria-valuemin="0" aria-valuemax="100" style="width: 10.0%" role="progressbar">10.0%</div></div>
<div class="progress"><div class="bg-primary progress-bar" aria-valuenow="34.0" aria-valuemin="0" aria-valuemax="100" style="width: 34.0%" role="progressbar">34.0%</div></div>
<div class="progress"><div class="bg-info progress-bar" aria-valuenow="45.0" aria-valuemin="0" aria-valuemax="100" style="width: 45.0%" role="progressbar">45.0%</div></div>
<div class="progress"><div class="bg-warning progress-bar" aria-valuenow="62.0" aria-valuemin="0" aria-valuemax="100" style="width: 62.0%" role="progressbar">62.0%</div></div>
<div class="progress"><div class="bg-danger progress-bar" aria-valuenow="83.0" aria-valuemin="0" aria-valuemax="100" style="width: 83.0%" role="progressbar">83.0%</div></div>
<div class="progress"><div class="bg-primary progress-bar" aria-valuenow="49.0" aria-valuemin="0" aria-valuemax="100" style="width: 49.0%" role="progressbar">49.0%</div></div>

Custom

25.0%
65.0%
ui_progress_bar do |pb|
  pb.bar 25, status: :warning, striped: true
  pb.bar 65, status: :danger
end

<div class="progress">
  <div class="bg-warning progress-bar progress-bar-striped" aria-valuenow="25.0" aria-valuemin="0" aria-valuemax="100" style="width: 25.0%" role="progressbar"></div>
  <div class="bg-danger progress-bar" aria-valuenow="65.0" aria-valuemin="0" aria-valuemax="100" style="width: 65.0%" role="progressbar"></div>
</div>