Tailwind CSS Progress Bar - Taco Vue

Use the Progress Bar to show an ongoing process that takes a noticeable time to finish. The progress bar can be determinate or indeterminate. Below we are presenting an example of the Progress Bar component that you can use in your project based on Taco. 

<Progress 
    value="50"
    color="blue"
/>

Progress Bar Variants

The Progress component comes with 2 different variants that you can change it using the color prop. 

<Progress value="50" color="blue" variant="filled"/>
<Progress value="50" color="blue" variant="gradient"/>

Progress Bar Colors

The Progress component comes with 19 different colors that you can change it using the color prop, below there are some examples of the colors but you can check all of the them here.

<Progress value="50" color="green"/>
<Progress value="50" color="blue"/>
<Progress value="50" color="red"/>
<Progress value="50" color="amber"/>
<Progress value="50" color="teal"/>
<Progress value="50" color="indigo"/>
<Progress value="50" color="purple"/>
<Progress value="50" color="pink"/>

Progress Bar with Label

50% Completed
<Progress value="50" color="blue" label="Completed"/>

Custom Progress Bar 

<Progress 
    :value="50"
    color="blue"
    variant="filled"
    label=""
>
</Progress>