Progress | Dreams AI Agent - Agent Builder Tailwind Admin Template

Basic Progress



<div class="preview-content flex flex-col gap-4"> 
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-primary" style="width: 0%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-primary" style="width: 25%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-primary" style="width: 50%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-primary" style="width: 75%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-primary" style="width: 100%"></div>
	</div>
</div>

Colored Progress



<div class="preview-content flex flex-col gap-4"> 
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-primary" style="width: 10%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-success" style="width: 25%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-info" style="width: 50%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-dark" style="width: 75%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-danger" style="width: 100%"></div>
	</div>
</div>

Striped Progress



<div class="preview-content flex flex-col gap-4"> 
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-success bg-[linear-gradient(45deg,rgba(255,255,255,.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,.15)_50%,rgba(255,255,255,.15)_75%,transparent_75%,transparent)] bg-[length:1rem_1rem]" style="width: 10%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-dark bg-[linear-gradient(45deg,rgba(255,255,255,.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,.15)_50%,rgba(255,255,255,.15)_75%,transparent_75%,transparent)] bg-[length:1rem_1rem]" style="width: 25%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-danger bg-[linear-gradient(45deg,rgba(255,255,255,.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,.15)_50%,rgba(255,255,255,.15)_75%,transparent_75%,transparent)] bg-[length:1rem_1rem]" style="width: 50%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-primary bg-[linear-gradient(45deg,rgba(255,255,255,.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,.15)_50%,rgba(255,255,255,.15)_75%,transparent_75%,transparent)] bg-[length:1rem_1rem]" style="width: 75%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-info bg-[linear-gradient(45deg,rgba(255,255,255,.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,.15)_50%,rgba(255,255,255,.15)_75%,transparent_75%,transparent)] bg-[length:1rem_1rem]" style="width: 100%"></div>
	</div>
</div>

Progress Height



<div class="preview-content flex flex-col gap-4"> 
	<div class="bg-border-color w-full h-1 rounded-lg">
		<div class="rounded-lg h-1 bg-primary" style="width: 10%"></div>
	</div>
	<div class="bg-border-color w-full h-2 rounded-lg">
		<div class="rounded-lg h-2 bg-primary" style="width: 25%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-primary" style="width: 50%"></div>
	</div>
	<div class="bg-border-color w-full h-4 rounded-lg">
		<div class="rounded-lg h-4 bg-primary" style="width: 75%"></div>
	</div>
	<div class="bg-border-color w-full h-5 rounded-lg">
		<div class="rounded-lg h-5 bg-primary" style="width: 100%"></div>
	</div>
</div>

Progress With Labels

10%

25%

50%

75%

100%



<div class="preview-content flex flex-col gap-4"> 
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-primary text-white text-center p-0.5 text-xs leading-none flex flex-col justify-center overflow-hidden" style="width: 10%">10%</div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-success text-white text-center p-0.5 text-xs leading-none flex flex-col justify-center overflow-hidden" style="width: 25%">25%</div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-info text-white text-center p-0.5 text-xs leading-none flex flex-col justify-center overflow-hidden" style="width: 50%">50%</div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-dark text-white text-center p-0.5 text-xs leading-none flex flex-col justify-center overflow-hidden" style="width: 75%">75%</div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-danger text-white text-center p-0.5 text-xs leading-none flex flex-col justify-center overflow-hidden" style="width: 100%">100%</div>
	</div>
</div>

Multiple bars With Sizes



<div class="preview-content flex flex-col gap-4"> 
	<div class="flex bg-border-color w-full h-1 rounded-lg">
		<div class="rounded-lg h-1 bg-primary" style="width: 5%"></div>
		<div class="rounded-lg h-1 bg-success" style="width: 10%"></div>
		<div class="rounded-lg h-1 bg-dark" style="width: 15%"></div>
	</div>
	<div class="flex bg-border-color w-full h-2 rounded-lg">
		<div class="rounded-lg h-2 bg-info" style="width: 10%"></div>
		<div class="rounded-lg h-2 bg-danger" style="width: 15%"></div>
		<div class="rounded-lg h-2 bg-primary" style="width: 20%"></div>
	</div>
	<div class="flex bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-dark" style="width: 15%"></div>
		<div class="rounded-lg h-3 bg-warning" style="width: 20%"></div>
		<div class="rounded-lg h-3 bg-info" style="width: 25%"></div>
	</div>
	<div class="flex bg-border-color w-full h-4 rounded-lg">
		<div class="rounded-lg h-4 bg-success" style="width: 20%"></div>
		<div class="rounded-lg h-4 bg-warning" style="width: 25%"></div>
		<div class="rounded-lg h-4 bg-dark" style="width: 30%"></div>
	</div>
	<div class="flex bg-border-color w-full h-5 rounded-lg">
		<div class="rounded-lg h-5 bg-danger" style="width: 25%"></div>
		<div class="rounded-lg h-5 bg-info" style="width: 30%"></div>
		<div class="rounded-lg h-5 bg-primary" style="width: 35%"></div>
	</div>
</div>

Animated Stripped Progress



<div class="preview-content flex flex-col gap-4"> 
	<div class="bg-border-color w-full h-3 rounded-lg overflow-hidden">
		<div class="striped-progress bg-success" style="width:10%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg overflow-hidden">
		<div class="striped-progress bg-dark" style="width:25%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg overflow-hidden">
		<div class="striped-progress bg-danger" style="width:50%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg overflow-hidden">
		<div class="striped-progress bg-primary" style="width:75%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg overflow-hidden">
		<div class="striped-progress bg-info" style="width:100%"></div>
	</div> 
</div>

Gradient Progress



<div class="preview-content flex flex-col gap-4"> 
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-primary-gradient" style="width: 10%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg--200" style="width: 25%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-info-gradient=200" style="width: 50%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-dark-gradient" style="width: 75%"></div>
	</div>
	<div class="bg-border-color w-full h-3 rounded-lg">
		<div class="rounded-lg h-3 bg-danger-gradient" style="width: 100%"></div>
	</div>
</div>