Moxi Design System

# Progress Indicators

Two types of progress indicators are provided: circular and linear. They may be given a percentage value to display; otherwise, they will animate to indicate indeterminate progress. Additionally, a simulateProgressDuration may be provided in order to "fake" determinate progress over the specified time.

# Circular

Indeterminate
Determinate
Simulated Progress (reaches 99% in 10 seconds)
Custom Sizes 
<div class="grid grid-cols-1 lg:grid-cols-2 gap-20 mt-20">
  <div class="flex flex-col space-y-20">
    <strong>Indeterminate</strong>
    <mx-circular-progress aria-label="Progress"  />
  </div>
  <div class="flex flex-col space-y-20">
    <strong>Determinate</strong>
    <div>
      <mx-circular-progress aria-label="Progress" value="25" />
      <mx-circular-progress aria-label="Progress" value="75" />
      <mx-circular-progress aria-label="Progress" value="100" />
      <mx-circular-progress aria-label="Progress" :value="progress" />
    </div>
  </div>
  <div class="flex flex-col space-y-20">
    <strong>Simulated Progress (reaches 99% in 10 seconds)</strong>
    <mx-circular-progress aria-label="Progress" simulate-progress-duration="10000" />
  </div>
  <div class="flex flex-col space-y-20">
    <strong>Custom Sizes</strong>
    <div>
      <mx-circular-progress aria-label="Progress" size="1.5rem" />
      <mx-circular-progress aria-label="Progress" size="2rem" :value="progress" />
      <mx-circular-progress aria-label="Progress" size="2.5rem" />
      <mx-circular-progress aria-label="Progress" size="4rem" :value="progress" />
    </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
27

# Linear

Indeterminate
Determinate
Simulated Progress (reaches 99% in 10 seconds) 
<div class="grid grid-cols-1 lg:grid-cols-2 gap-20 mt-20">
  <div class="flex flex-col space-y-20">
    <strong>Indeterminate</strong>
    <mx-linear-progress aria-label="Progress" />
  </div>
  <div class="flex flex-col space-y-20">
    <strong>Determinate</strong>
    <div class="space-y-16">
      <mx-linear-progress aria-label="Progress" value="25" />
      <mx-linear-progress aria-label="Progress" value="75" />
      <mx-linear-progress aria-label="Progress" value="100" />
      <mx-linear-progress aria-label="Progress" :value="progress" />
    </div>
  </div>
  <div class="flex flex-col space-y-20">
    <strong>Simulated Progress (reaches 99% in 10 seconds)</strong>
    <mx-linear-progress aria-label="Progress" simulate-progress-duration="10000" />
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Delay Appearance

If you only want to show a progress indicator when a task is taking longer to finish, use the appear-delay prop.

Start Loading

Progress indicators will appear after 500ms.

<div class="h-192 flex flex-col items-center justify-end relative pb-16 border bg-white">
  <mx-linear-progress v-if="isLoading" aria-label="Progress" appear-delay="500" class="absolute top-0" />
  <mx-circular-progress v-if="isLoading" aria-label="Progress" appear-delay="500" class="absolute top-24" />
  <mx-button class="w-160" @click="isLoading = !isLoading">
    {{ isLoading ? 'Stop Loading' : 'Start Loading' }}
  </mx-button>
  <p class="my-8">Progress indicators will appear after 500ms.</p>
</div>
1
2
3
4
5
6
7

# mx-circular-progress

# Properties

Property Attribute Description Type Default
appearDelay appear-delay Delay the appearance of the indicator for this many milliseconds number 0
simulateProgressDuration simulate-progress-duration If provided, the indicator will simulate progress toward 99% over the given duration (milliseconds). number null
size size The value to use for the width and height string '3rem'
value value The progress percentage from 0 to 100. If not provided (or set to null), an indeterminate progress indicator will be displayed. number null

# Dependencies

# Used by

# Graph

graph TD;
  mx-image-upload --> mx-circular-progress
  style mx-circular-progress fill:#f9f,stroke:#333,stroke-width:4px
1
2
3

If you are having trouble setting a prop or adding an event listener, refer to this page.

# mx-linear-progress

# Properties

Property Attribute Description Type Default
appearDelay appear-delay Delay the appearance of the indicator for this many milliseconds number 0
simulateProgressDuration simulate-progress-duration If provided, the indicator will simulate progress toward 99% over the given duration (milliseconds). number null
value value The progress percentage from 0 to 100. If not provided (or set to null), an indeterminate progress indicator will be displayed. number null

# Dependencies

# Used by

# Graph

graph TD;
  mx-table --> mx-linear-progress
  style mx-linear-progress fill:#f9f,stroke:#333,stroke-width:4px
1
2
3

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Search Fields →