Skip to content

Vue Progress Bar - Flowbite

Default

vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
  <Progress progress="45"></Progress>
</template>
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
  <Progress progress="45"></Progress>
</template>

Sizes

You can also use different sizes by using various sizing.

vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
  <!-- small size -->
  <Progress size="sm" label="Small" progress="45"></Progress>
  <!-- medium size -->
  <Progress size="md" label="Medium" progress="45"></Progress>
  <!-- large size -->
  <Progress size="lg" label="Large" progress="45"></Progress>
  <!-- extra large size -->
  <Progress size="xl" label="Extra Large" progress="45"></Progress>
</template>
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
  <!-- small size -->
  <Progress size="sm" label="Small" progress="45"></Progress>
  <!-- medium size -->
  <Progress size="md" label="Medium" progress="45"></Progress>
  <!-- large size -->
  <Progress size="lg" label="Large" progress="45"></Progress>
  <!-- extra large size -->
  <Progress size="xl" label="Extra Large" progress="45"></Progress>
</template>
Small
Medium
Large
Extra Large

With label inside

Here is an example of using a progress bar with the label inside the bar.

vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
  <Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
</template>
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
  <Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
</template>
45%

With label outside

And this is an example of using a progress bar outside the bar.

vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
  <Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
</template>
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
  <Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
</template>
Flowbite Vue 345%

Colors

You can also apply color.

vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
  <!-- Default color -->
  <Progress label="Default" progress="45"></Progress>
  <!-- Dark -->
  <Progress color="dark" label="Dark" progress="45"></Progress>
  <!-- Blue -->
  <Progress color="blue" label="Blue" progress="45"></Progress>
  <!-- Red -->
  <Progress color="red" label="Red" progress="45"></Progress>
  <!-- Green -->
  <Progress color="green" label="Green" progress="45"></Progress>
  <!-- Yellow -->
  <Progress color="yellow" label="Yellow" progress="45"></Progress>
  <!-- Indigo -->
  <Progress color="indigo" label="Indigo" progress="45"></Progress>
  <!-- Purple -->
  <Progress color="purple" label="Purple" progress="45"></Progress>

</template>
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
  <!-- Default color -->
  <Progress label="Default" progress="45"></Progress>
  <!-- Dark -->
  <Progress color="dark" label="Dark" progress="45"></Progress>
  <!-- Blue -->
  <Progress color="blue" label="Blue" progress="45"></Progress>
  <!-- Red -->
  <Progress color="red" label="Red" progress="45"></Progress>
  <!-- Green -->
  <Progress color="green" label="Green" progress="45"></Progress>
  <!-- Yellow -->
  <Progress color="yellow" label="Yellow" progress="45"></Progress>
  <!-- Indigo -->
  <Progress color="indigo" label="Indigo" progress="45"></Progress>
  <!-- Purple -->
  <Progress color="purple" label="Purple" progress="45"></Progress>

</template>
Default
Dark
Blue
Red
Green
Yellow
Indigo
Purple

Released under the MIT License.