Morpheme

Appearance

ProgressBar ​

The VProgressBar component is a component that displays the progress of a task or action.

Usage ​

Basic Usage ​

To use the component, you can include it in your template with a given modelValue, which determines the progress of the task. You can also specify a color for the progress bar, such as "primary", "secondary", "info", "warning", "success", "error", or "dark".

INFO

The VProgressbBr component is registered globally when you install with @morpheme/ui. So you don't need to import it manually.

Slots ​

You can also use slots to customize the label displayed in the progress bar.

v-model ​

The component also supports the v-model directive, which allows you to bind the value of the progress bar to a data property.

Indeterminate ​

You can also set the indeterminate prop to display an indeterminate progress bar, which indicates that a task is in progress but the progress cannot be determined.

Props ​

NameTypeDefault
modelValuenumber | string0
colorstringdefault
min[Number, String]0
max[Number, String]100
height[Number, String]''
bgColorString''
fillColorString''
bgClassString''
fillClassString''
labelString''
labelClassString''
indeterminateBooleanfalse

Events ​

update:modelValue ​

Emitted when the modelValue prop is updated.

vue
<template>
  <VProgressBar @update:modelValue="onModelValueUpdate" />
</template>

<script>
export default {
  methods: {
    onModelValueUpdate(value) {
      console.log(`Model value updated: ${value}`);
    },
  },
};
</script>
<template>
  <VProgressBar @update:modelValue="onModelValueUpdate" />
</template>

<script>
export default {
  methods: {
    onModelValueUpdate(value) {
      console.log(`Model value updated: ${value}`);
    },
  },
};
</script>

Slots ​

default ​

Slot for custom content to be displayed within the progress bar. Receives an object containing the value of the progress bar as a percentage.

vue
<template>
  <VProgressBar>
    <template v-slot="{value}"> {{ value }}% </template>
  </VProgressBar>
</template>
<template>
  <VProgressBar>
    <template v-slot="{value}"> {{ value }}% </template>
  </VProgressBar>
</template>

label ​

Slot for custom label content to be displayed within the progress bar. Receives an object containing the value of the progress bar as a percentage. If this slot is not provided, the label prop will be used as the label.

vue
<template>
  <VProgressBar>
    <template #label="{value}"> {{ value }}% </template>
  </VProgressBar>
</template>
<template>
  <VProgressBar>
    <template #label="{value}"> {{ value }}% </template>
  </VProgressBar>
</template>

CSS Variables ​

scss
:root {
  --v-progress-bar-bg-color: var(--color-gray-200);
  --v-progress-bar-fill-color: var(--color-gray-400);
  --v-progress-bar-height: var(--size-spacing-2);
  --v-progress-bar-border-radius: var(--border-radius-full);
  --v-progress-bar-font-size: var(--size-font-xs);
  --v-progress-bar-label-color: var(--color-white);
  --v-progress-bar-transition-property: all;
  --v-progress-bar-transition-duration: 300ms;
  --v-progress-bar-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --v-progress-bar-indeterminate-animation-name: indeterminateAnimation;
  --v-progress-bar-indeterminate-animation-duration: 2s;
  --v-progress-bar-indeterminate-animation-timing-function: linear;
  --v-progress-bar-indeterminate-animation-iteration-count: infinite;
}
:root {
  --v-progress-bar-bg-color: var(--color-gray-200);
  --v-progress-bar-fill-color: var(--color-gray-400);
  --v-progress-bar-height: var(--size-spacing-2);
  --v-progress-bar-border-radius: var(--border-radius-full);
  --v-progress-bar-font-size: var(--size-font-xs);
  --v-progress-bar-label-color: var(--color-white);
  --v-progress-bar-transition-property: all;
  --v-progress-bar-transition-duration: 300ms;
  --v-progress-bar-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --v-progress-bar-indeterminate-animation-name: indeterminateAnimation;
  --v-progress-bar-indeterminate-animation-duration: 2s;
  --v-progress-bar-indeterminate-animation-timing-function: linear;
  --v-progress-bar-indeterminate-animation-iteration-count: infinite;
}

Standalone Installation ​

You can also install the Progress Bar component individually via @morpheme/progress-bar package:

bash
npm i @morpheme/progress-bar
npm i @morpheme/progress-bar
vue
<script setup lang="ts">
import VProgressBar from '@morpheme/progress-bar';
</script>

<template>
  <VProgressBar />
</template>
<script setup lang="ts">
import VProgressBar from '@morpheme/progress-bar';
</script>

<template>
  <VProgressBar />
</template>

Storybook ​

View Storybook documentation here.