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.
<x-progressbar percentage="50"></x-progressbar>
Use this examples to create simple progress components.
<x-progressnar color="bg-blue-500" percentage="50"></x-progressbar>
<x-progressnar color="bg-gradient-to-tr from-blue-600 to-blue-400" percentage="50"></x-progressbar>
Use this example to create progress components on different colors.
<x-progressbar color="bg-blue-500" percentage="50"></x-progressbar>
<x-progressbar color="bg-red-500" percentage="50"></x-progressbar>
<x-progressbar color="bg-green-500" percentage="50"></x-progressbar>
<x-progressbar color="bg-amber-500" percentage="50"></x-progressbar>
<x-progressbar color="bg-teal-500" percentage="50"></x-progressbar>
<x-progressbar color="bg-indigo-500" percentage="50"></x-progressbar>
<x-progressbar color="bg-purple-500" percentage="50"></x-progressbar>
<x-progressbar color="bg-pink-500" percentage="50"></x-progressbar>
Use this example to create beautiful progress components with gradients.
<x-progressbar percentage="50" showPercentageLabel="true"></x-progressbar>