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
<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">Striped</p>
    <div class="midwest-progress-bar size-lg variant-striped theme-primary">
      <div class="progress-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="65">
        <div class="progress-fill" style="width: 65.0%"></div>
      </div>
    </div>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Striped + Animated</p>
    <div class="midwest-progress-bar size-lg variant-striped animated theme-primary">
      <div class="progress-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="65">
        <div class="progress-fill" style="width: 65.0%"></div>
      </div>
    </div>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Striped + Success</p>
    <div class="midwest-progress-bar size-lg variant-striped theme-green">
      <div class="progress-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
        <div class="progress-fill" style="width: 100.0%"></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">Striped</p>
    <%= midwest_progress_bar(value: 65, variant: :striped, size: :lg) %>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Striped + Animated</p>
    <%= midwest_progress_bar(value: 65, variant: :striped, animated: true, size: :lg) %>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Striped + Success</p>
    <%= midwest_progress_bar(value: 100, variant: :striped, state: :success, size: :lg) %>
  </div>
</div>

Striped

The striped variant with an animated option.

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

Annotate a preview to embed its Figma design here:

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