Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
<div class="p-8 max-w-md">
  <div class="midwest-progress-bar size-default variant-default theme-primary">
    <div class="progress-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60">
      <div class="progress-fill" style="width: 60.0%"></div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<%
  raw_value = params[:value]
  value = raw_value == "" ? nil : (raw_value || 60).to_f
  max = params[:max].present? ? params[:max].to_f : 100
  label = params[:label].presence || "Progress"
  show_label = params[:show_label] == true
  show_value = params[:show_value] == true
  variant = params[:variant]&.to_sym || :default
  size = params[:size]&.to_sym || :default
  state = params[:state]&.to_sym || :default
  animated = params[:animated] == true
%>
<div class="p-8 max-w-md">
  <%= midwest_progress_bar(
    value: value,
    max: max,
    label: label,
    show_label: show_label,
    show_value: show_value,
    variant: variant,
    size: size,
    state: state,
    animated: animated
  ) %>
</div>

Playground

Explore the component with live parameters.

Param Description Input

Current value (leave blank for indeterminate)

Maximum value

Accessible label

Show label above the bar

Show percentage above the bar

Visual variant

Size

State theme

Animate the striped pattern

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Progress Bar/playground

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."