import{c as u}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g,d as m,$ as B,o as p,c as r,k as c,t as F,n as y,l as s,e as d,N as f,F as h,a as b,H as a,b as _,Q as E}from"./chunks/framework.3f630664.js";const w={default:"bg-blue-600 dark:bg-blue-600",blue:"bg-blue-600 dark:bg-blue-600",dark:"bg-gray-600 dark:bg-gray-300",green:"bg-green-600 dark:bg-green-500",red:"bg-red-600 dark:bg-red-500",yellow:"bg-yellow-400",indigo:"bg-indigo-600 dark:bg-indigo-500",purple:"bg-purple-600 dark:bg-purple-500"},v={default:"",blue:"text-blue-700 dark:text-blue-500",dark:"dark:text-white",green:"text-green-700 dark:text-green-500",red:"text-red-700 dark:text-red-500",yellow:"text-yellow-700 dark:text-yellow-500",indigo:"text-indigo-700 dark:text-indigo-500",purple:"text-purple-700 dark:text-purple-500"},C={sm:"h-1.5 text-xs leading-none",md:"h-2.5 text-xs leading-none",lg:"h-4 text-sm leading-none",xl:"h-6 text-base leading-tight"};function A(n){const e=g(()=>u(w[n.color.value],C[n.size.value])),t=g(()=>u(C[n.size.value])),i=g(()=>u(v[n.color.value]));return{innerClasses:e,outerClasses:t,outsideLabelClasses:i}}const D={key:0,class:"flex justify-between mb-1"},l=m({__name:"FwbProgress",props:{color:{default:"default"},label:{default:""},labelPosition:{default:"none"},labelProgress:{type:Boolean,default:!1},progress:{default:0},size:{default:"md"}},setup(n){const e=n,{innerClasses:t,outerClasses:i,outsideLabelClasses:q}=A(B(e));return(o,O)=>(p(),r("div",null,[o.label||o.labelProgress&&o.labelPosition==="outside"?(p(),r("div",D,[c("span",{class:y([s(q),"text-base font-medium"])},F(o.label),3),o.labelProgress&&o.labelPosition==="outside"?(p(),r("span",{key:0,class:y([s(q),"text-sm font-medium"])},F(o.progress)+"%",3)):d("",!0)])):d("",!0),c("div",{class:y([s(i),"w-full bg-gray-200 rounded-full dark:bg-gray-700"])},[c("div",{class:y([s(t),"rounded-full font-medium text-blue-100 text-center p-0.5"]),style:f({width:o.progress+"%"})},[o.labelProgress&&o.labelPosition==="inside"?(p(),r(h,{key:0},[b(F(o.progress)+"% ",1)],64)):d("",!0)],6)],2)]))}}),k={class:"vp-raw"},P={__name:"FwbProgressExample",setup(n){return(e,t)=>(p(),r("div",k,[a(s(l),{progress:45})]))}},x={class:"vp-raw grid gap-2"},T={__name:"FwbProgressExampleColor",setup(n){return(e,t)=>(p(),r("div",x,[a(s(l),{label:"Default",progress:12.5}),a(s(l),{color:"dark",label:"Dark",progress:25}),a(s(l),{color:"blue",label:"Blue",progress:37.5}),a(s(l),{color:"red",label:"Red",progress:50}),a(s(l),{color:"green",label:"Green",progress:62.5}),a(s(l),{color:"yellow",label:"Yellow",progress:75}),a(s(l),{color:"indigo",label:"Indigo",progress:87.5}),a(s(l),{color:"purple",label:"Purple",progress:100})]))}},z={__name:"FwbProgressExampleLabelInside",setup(n){return(e,t)=>(p(),_(s(l),{progress:50,"label-position":"inside","label-progress":"",size:"lg"}))}},S={__name:"FwbProgressExampleLabelOutside",setup(n){return(e,t)=>(p(),_(s(l),{progress:42,"label-position":"outside","label-progress":"",label:"Flowbite Vue 3"}))}},V={class:"vp-raw grid gap-2"},I={__name:"FwbProgressExampleSize",setup(n){return(e,t)=>(p(),r("div",V,[a(s(l),{progress:25,label:"Small",size:"sm"}),a(s(l),{progress:50,label:"Medium",size:"md"}),a(s(l),{progress:75,label:"Large",size:"lg"}),a(s(l),{progress:100,label:"Extra Large",size:"xl"})]))}},N=c("h1",{id:"vue-progress-bar-flowbite",tabindex:"-1"},[b("Vue Progress Bar - Flowbite "),c("a",{class:"header-anchor",href:"#vue-progress-bar-flowbite","aria-label":'Permalink to "Vue Progress Bar - Flowbite"'},"")],-1),$=c("h2",{id:"default",tabindex:"-1"},[b("Default "),c("a",{class:"header-anchor",href:"#default","aria-label":'Permalink to "Default"'},"")],-1),L=E(`

vue

<template>
  <fwb-progress :progress="45" />
</template>

<script setup>
import { FwbProgress } from 'flowbite-vue'
</script>

<template>
  <fwb-progress :progress="45" />
</template>

<script setup>
import { FwbProgress } from 'flowbite-vue'
</script>

Sizes

You can also use different sizes by using various sizing.

`,3),R=E(`

vue

<template>
  <div class="grid gap-2">
    <fwb-progress :progress="25" size="sm" label="Small" />
    <fwb-progress :progress="50" size="md" label="Medium" />
    <fwb-progress :progress="75" size="lg" label="Large" />
    <fwb-progress :progress="100" size="xl" label="Extra Large" />
  </div>
</template>

<script setup>
import { FwbProgress } from 'flowbite-vue'
</script>

<template>
  <div class="grid gap-2">
    <fwb-progress :progress="25" size="sm" label="Small" />
    <fwb-progress :progress="50" size="md" label="Medium" />
    <fwb-progress :progress="75" size="lg" label="Large" />
    <fwb-progress :progress="100" size="xl" label="Extra Large" />
  </div>
</template>

<script setup>
import { FwbProgress } from 'flowbite-vue'
</script>

With label inside

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

`,3),Y=E(`

vue

<template>
  <fwb-progress
    :progress="50"
    label-position="inside"
    label-progress
    size="lg"
  />
</template>

<script setup>
import { FwbProgress } from 'flowbite-vue'
</script>

<template>
  <fwb-progress
    :progress="50"
    label-position="inside"
    label-progress
    size="lg"
  />
</template>

<script setup>
import { FwbProgress } from 'flowbite-vue'
</script>

With label outside

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

`,3),W=E(`

vue

<template>
  <fwb-progress
    :progress="42"
    label-position="outside"
    label-progress
    label="Flowbite Vue 3"
  />
</template>

<script setup>
import { FwbProgress } from 'flowbite-vue'
</script>

<template>
  <fwb-progress
    :progress="42"
    label-position="outside"
    label-progress
    label="Flowbite Vue 3"
  />
</template>

<script setup>
import { FwbProgress } from 'flowbite-vue'
</script>

Colors

You can also apply color.

`,3),G=E(`

vue

<template>
  <div class="grid gap-2">
    <fwb-progress :progress="12.5" label="Default"  />
    <fwb-progress :progress="25" color="dark" label="Dark"  />
    <fwb-progress :progress="37.5" color="blue" label="Blue"  />
    <fwb-progress :progress="50" color="red" label="Red"  />
    <fwb-progress :progress="62.5" color="green" label="Green"  />
    <fwb-progress :progress="75" color="yellow" label="Yellow"  />
    <fwb-progress :progress="87.5" color="indigo" label="Indigo"  />
    <fwb-progress :progress="100" color="purple" label="Purple"  />
  </div>
</template>

<script setup>
import { FwbProgress } from 'flowbite-vue'
</script>

<template>
  <div class="grid gap-2">
    <fwb-progress :progress="12.5" label="Default"  />
    <fwb-progress :progress="25" color="dark" label="Dark"  />
    <fwb-progress :progress="37.5" color="blue" label="Blue"  />
    <fwb-progress :progress="50" color="red" label="Red"  />
    <fwb-progress :progress="62.5" color="green" label="Green"  />
    <fwb-progress :progress="75" color="yellow" label="Yellow"  />
    <fwb-progress :progress="87.5" color="indigo" label="Indigo"  />
    <fwb-progress :progress="100" color="purple" label="Purple"  />
  </div>
</template>

<script setup>
import { FwbProgress } from 'flowbite-vue'
</script>

`,1),J=JSON.parse('{"title":"Vue Progress Bar - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/progress.md","filePath":"components/progress.md"}'),M={name:"components/progress.md"},Q=Object.assign(M,{setup(n){return(e,t)=>(p(),r("div",null,[N,$,a(P),L,a(I),R,a(z),Y,a(S),W,a(T),G]))}});export{J as __pageData,Q as default};

Sizes ​

With label inside ​

With label outside ​

Colors ​

Sizes

With label inside

With label outside

Colors