ProgressBar

Stable

Visually communicates the completion status of a process or usage

<script setup lang="ts">
import { HProgressBar } from '@holistics/design-system'

const percentage = 70
</script>
<template>
  <HProgressBar
    :percentage
    class="w-80"
  />
</template>

Examples

Large

<script setup lang="ts">
import { HProgressBar } from '@holistics/design-system'

const percentage = 70
</script>
<template>
  <HProgressBar
    :percentage
    class="w-80"
    size="md"
  />
</template>

Error

<script setup lang="ts">
import { HProgressBar } from '@holistics/design-system'

const percentage = 70
</script>
<template>
  <HProgressBar
    :percentage
    class="w-80"
    type="error"
  />
</template>

Running

<script setup lang="ts">
import { HProgressBar } from '@holistics/design-system'
import { useInterval } from '@vueuse/core'
import { computed } from 'vue'

const _percentage = useInterval(50)
const percentage = computed(() => _percentage.value % 100)
</script>
<template>
  <HProgressBar
    :percentage
    class="w-80"
  />
</template>

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
type	"default" | "error" = "default"
percentage	number = 0
size	"sm" | "md" = "sm"