Basecoat UI MCP

<!-- Basecoat Progress Component --> <div class="space-y-4 w-full max-w-md"> <!-- Basic Progress Bar --> <div class="space-y-2"> <div class="flex justify-between text-sm"> <span>Progress</span> <span>60%</span> </div> <div class="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full"> <div class="bg-primary h-full transition-all" style="width: 60%"></div> </div> </div> <!-- Progress without label --> <div class="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full"> <div class="bg-primary h-full transition-all" style="width: 33%"></div> </div> <!-- Indeterminate Progress --> <div class="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full"> <div class="bg-primary h-full w-1/3 animate-[progress_1s_ease-in-out_infinite]"></div> </div> </div> <!-- Different Colors --> <div class="space-y-4 w-full max-w-md mt-8"> <div class="bg-green-500/20 relative h-2 w-full overflow-hidden rounded-full"> <div class="bg-green-500 h-full transition-all" style="width: 80%"></div> </div> <div class="bg-yellow-500/20 relative h-2 w-full overflow-hidden rounded-full"> <div class="bg-yellow-500 h-full transition-all" style="width: 50%"></div> </div> <div class="bg-red-500/20 relative h-2 w-full overflow-hidden rounded-full"> <div class="bg-red-500 h-full transition-all" style="width: 25%"></div> </div> </div>