Flowbite Vue 3Vue 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