Usage

Default

Use the v-model to bind the progress value (0-100).

Colors

Use the color prop to customize the component's color.

Sizes

Use the size prop to customize the component's height.

Rounded

Use the rounded prop to control the border radius of the progress bar.

<script setup lang="ts">
import { CLProgress, CLColors } from '@codeandfunction/callaloo'
</script>

<template>
  <CLProgress :color="CLColors.Primary" v-model="value" rounded />
  <CLProgress :color="CLColors.Primary" :rounded="false" v-model="value" />
</template>

Status

Use the status prop to display the current progress value above the bar.

<script setup lang="ts">
import { CLProgress, CLColors } from '@codeandfunction/callaloo'
</script>

<template>
  <CLProgress :color="CLColors.Primary" :status="true" v-model="value" />
</template>

Inverted

Use the inverted prop to reverse the direction of the progress bar.

<script setup lang="ts">
import { CLProgress, CLColors } from '@codeandfunction/callaloo'
</script>

<template>
  <CLProgress :color="CLColors.Primary" :inverted="false" v-model="value" />
  <CLProgress :color="CLColors.Primary" :inverted="true" v-model="value" />
</template>

Progress Values

The progress bar can display any value from 0 to 100.

<script setup lang="ts">
import { CLProgress, CLColors } from '@codeandfunction/callaloo'
</script>

<template>
  <CLProgress :color="CLColors.Primary" v-model="25" />
  <CLProgress :color="CLColors.Success" v-model="50" />
  <CLProgress :color="CLColors.Warning" v-model="75" />
  <CLProgress :color="CLColors.Danger" v-model="100" />
</template>

Props