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
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="p-8 flex flex-col gap-6 max-w-md">
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Indeterminate (no value)</p>
    <div class="midwest-progress-bar size-default variant-default is-indeterminate theme-primary">
      <div class="progress-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-fill" style=""></div>
      </div>
    </div>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Indeterminate with label</p>
    <div class="midwest-progress-bar size-default variant-default is-indeterminate theme-primary">
      <div class="progress-bar-header">
        <span class="progress-bar-label">Uploading…</span>
      </div>
      <div class="progress-track" role="progressbar" aria-label="Uploading…" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-fill" style=""></div>
      </div>
    </div>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Indeterminate large</p>
    <div class="midwest-progress-bar size-lg variant-default is-indeterminate theme-primary">
      <div class="progress-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-fill" style=""></div>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="p-8 flex flex-col gap-6 max-w-md">
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Indeterminate (no value)</p>
    <%= midwest_progress_bar %>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Indeterminate with label</p>
    <%= midwest_progress_bar(label: "Uploading…", show_label: true) %>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Indeterminate large</p>
    <%= midwest_progress_bar(size: :lg) %>
  </div>
</div>

Indeterminate

When no value is passed the bar animates indefinitely to signal an in-progress operation of unknown duration.

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/indeterminate

Annotate a preview to embed its Figma design here:

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