Skip to content
On this page

Progress Bar

The progress bar component is a simple progress bar component that can be used to show the progress of any task.

Basic example

vue
<template>
  <div>
    <ProgressBar title="Progress sm" value="80" barColor="bg-primary-500"  />
  </div>
</template>
<script setup>
import ProgressBar from "@/components/ProgressBar";
import { ref } from "vue";
const progress = ref(0);
setInterval(() => {
  progress.value += 10;
}, 1000);
</script>

TIP

You can use title props for progress bar title, value props for progress bar value, height props for progress bar height, barColor props for progress bar background color. striped props for progress bar striped, animate props for progress bar animation.

COPYRIGHT © 2022 Codeshaper, All rights reserved.