Progress Bar

The Progress Bar component visually represents the progress of a task or process, allowing users to track completion at a glance. It supports different sizes and an optional label for enhanced clarity.

Basic Usage

25%

<template>
  <mc-progress-bar :value="progressValue" />
</template>

<script setup>
import { ref } from 'vue';
const progressValue = ref(25);
</script>

Size

50%

75%

100%

<template>
  <mc-progress-bar :value="50" size="xs" />
  <mc-progress-bar :value="75" size="sm" />
  <mc-progress-bar :value="100" size="lg" />
</template>

<script setup>
import { ref } from 'vue';
const progressValue = ref(25);
</script>

Label

100%

<template>
  <mc-progress-bar :value="100" size="lg" :label="true" />
  <mc-progress-bar :value="100" size="lg" :label="false" />
</template>

<script setup>
import { ref } from 'vue';
const progressValue = ref(25);
</script>

Supporting Label

The supporting-label prop displays additional text alongside the percentage label. This is useful for providing context, such as the total value or unit of measurement.

60%of 100 MB

75%Complete

45%Remaining

<template>
  <!-- Display progress with total value -->
  <mc-progress-bar :value="60" :max="100" :label="true" supporting-label="of 100 MB" />

  <!-- Display with status text -->
  <mc-progress-bar :value="75" :label="true" supporting-label="Complete" />

  <!-- Display with contextual information -->
  <mc-progress-bar :value="45" :label="true" supporting-label="Remaining" />
</template>

<script setup>
import { ref } from 'vue';

const progressValue = ref(60);
</script>

Placements

The label-placement prop controls where the percentage label appears relative to the progress bar. When the label prop is set to true, you can position the percentage label in various alignments.

Top Placements

60%

60%

60%

<template>
  <mc-progress-bar :value="60" label-placement="top-start" :label="true" />
  <mc-progress-bar :value="60" label-placement="top-center" :label="true" />
  <mc-progress-bar :value="60" label-placement="top-end" :label="true" />
</template>

<script setup>
import { ref } from 'vue';

const progressValue = ref(60);
</script>

Bottom Placements

60%

60%

60%

<template>
  <mc-progress-bar :value="60" label-placement="bottom-start" :label="true" />
  <mc-progress-bar :value="60" label-placement="bottom-center" :label="true" />
  <mc-progress-bar :value="60" label-placement="bottom-end" :label="true" />
</template>

<script setup>
import { ref } from 'vue';

const progressValue = ref(60);
</script>

Side Placements

60%

60%

<template>
  <mc-progress-bar :value="60" label-placement="left" :label="true" />
  <mc-progress-bar :value="60" label-placement="right" :label="true" />
</template>

<script setup>
import { ref } from 'vue';
const progressValue = ref(60);
</script>

Color Variants

The Progress Bar component supports different color variants to indicate different states or contexts.

75%

60%

45%

30%

90%

<template>
  <!-- Success (default) -->
  <mc-progress-bar :value="75" color="success" />

  <!-- Danger/Error state -->
  <mc-progress-bar :value="60" color="danger" />

  <!-- Warning state -->
  <mc-progress-bar :value="45" color="warning" />

  <!-- Info state -->
  <mc-progress-bar :value="30" color="info" />

  <!-- Neutral state -->
  <mc-progress-bar :value="90" color="neutral" />
</template>

<script setup>
import { ref } from 'vue';
const progressValue = ref(25);
</script>

Custom Max Values

You can customize the maximum value to represent different scales or contexts.

50%

25%

40%

<template>
  <!-- 5 out of 10 = 50% -->
  <mc-progress-bar :value="5" :max="10" :label="true" />

  <!-- 3 out of 12 = 25% -->
  <mc-progress-bar :value="3" :max="12" :label="true" />

  <!-- 8 out of 20 = 40% -->
  <mc-progress-bar :value="8" :max="20" :label="true" />
</template>

<script setup>
import { ref } from 'vue';
const progressValue = ref(25);
</script>

Percentage Placement

Control where the percentage label appears relative to the progress bar. You can position it at the top, bottom, left, or right.

60%

60%

60%

60%

<template>
  <!-- Percentage above the progress bar -->
  <mc-progress-bar :value="60" labelPlacement="top" :label="true" />

  <!-- Percentage below the progress bar (default) -->
  <mc-progress-bar :value="60" labelPlacement="bottom" :label="true" />

  <!-- Percentage to the left of the progress bar -->
  <mc-progress-bar :value="60" labelPlacement="left" :label="true" />

  <!-- Percentage to the right of the progress bar -->
  <mc-progress-bar :value="60" labelPlacement="right" :label="true" />
</template>

<script setup>
import { ref } from 'vue';
const progressValue = ref(25);
</script>

Advanced Examples

File Upload Progress

65%

<template>
  <div>
    <mc-progress-bar :value="uploadProgress" color="success" size="sm" :label="true" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const uploadProgress = ref(65);

// Simulate upload progress
const simulateUpload = () => {
  const interval = setInterval(() => {
    uploadProgress.value += Math.random() * 10;
    if (uploadProgress.value >= 100) {
      uploadProgress.value = 100;
      clearInterval(interval);
    }
  }, 500);
};

// Start simulation
simulateUpload();
</script>

Error State Progress

60%

<template>
  <div>
    <mc-progress-bar :value="errorProgress" color="danger" size="lg" :label="true" />
    <p class="mc-text-color-danger-base mc-text-sm">Upload failed at 60%</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const errorProgress = ref(60);
</script>

Multi-Step Process

60%

Step 3 of 5 completed

<template>
  <div>
    <mc-progress-bar :value="stepProgress" color="info" size="sm" :label="true" />
    <p class="mc-text-color-base mc-text-sm">Step {{ currentStep }} of {{ totalSteps }} completed</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const currentStep = ref(3);
const totalSteps = ref(5);
const stepProgress = ref(60); // 3/5 = 60%
</script>

API Reference

Props

Name	Description	Type	Default
value	The current progress value. This determines how much of the progress bar is filled. The value is calculated as a percentage of the max value.	number	0
size	Defines the height of the progress bar. Options include: xs: Extra small (4px height) sm: Small (8px height) lg: Large (12px height)	'xs' | 'sm' | 'lg'	'lg'
max	The maximum value for the progress bar. The value prop is calculated as a percentage of this number. Must be between 1 and 100.	number	100
label	When set to true, displays a percentage label below the progress bar. The label shows the calculated percentage based on value and max.	boolean	true
color	Defines the color theme of the progress bar. Options include: success: Green color for successful operations (default) danger: Red color for errors or failed operations warning: Orange color for warnings or pending operations info: Blue color for informational states neutral: Gray color for neutral states	'success' | 'danger' | 'warning' | 'info' | 'neutral'	'success'
label-placement	Defines the position and alignment of the percentage label relative to the progress bar. Options include: top: Places the percentage label above the progress bar, aligned left (same as top-start) top-start: Places the percentage label above the progress bar, aligned left top-center: Places the percentage label above the progress bar, centered top-end: Places the percentage label above the progress bar, aligned right bottom: Places the percentage label below the progress bar, aligned left (same as bottom-start, default) bottom-start: Places the percentage label below the progress bar, aligned left bottom-center: Places the percentage label below the progress bar, centered bottom-end: Places the percentage label below the progress bar, aligned right left: Places the percentage label to the left of the progress bar right: Places the percentage label to the right of the progress bar	'top' | 'top-start' | 'top-center' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'left' | 'right'	'bottom'
supporting-label	Displays additional text alongside the percentage label. This is useful for providing context such as the total value, unit of measurement, or status information. The supporting label appears next to the main percentage label.	string	''