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 from '@codeandfunction/callaloo/CLProgress';
import { 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 from '@codeandfunction/callaloo/CLProgress';
import { 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 from '@codeandfunction/callaloo/CLProgress';
import { 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 from '@codeandfunction/callaloo/CLProgress';
import { 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