Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="p-8 flex flex-col gap-4 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 class="midwest-progress-bar size-default variant-default theme-primary">
    <div class="progress-bar-header">
      <span class="progress-bar-label">Progress</span>
      <span class="progress-bar-value">60%</span>
    </div>
    <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
<div class="p-8 flex flex-col gap-4 max-w-md">
  <%= midwest_progress_bar(value: 60) %>
  <%= midwest_progress_bar(value: 60, show_label: true, show_value: true) %>
</div>

Default

A determinate progress bar at 60%.

No params configured.

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

Accessibility

Figma embed for Progress Bar/default

Annotate a preview to embed its Figma design here:

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