Basecoat UI MCP

<!-- Basecoat Spinner Component --> <div class="space-y-8"> <!-- Size Variants --> <div class="flex items-center gap-6"> <svg class="size-3 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="status" aria-label="Loading"> <circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle> <path d="M12 2a10 10 0 0 1 10 10" stroke-opacity="1"></path> </svg> <svg class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="status" aria-label="Loading"> <circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle> <path d="M12 2a10 10 0 0 1 10 10" stroke-opacity="1"></path> </svg> <svg class="size-6 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="status" aria-label="Loading"> <circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle> <path d="M12 2a10 10 0 0 1 10 10" stroke-opacity="1"></path> </svg> <svg class="size-8 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="status" aria-label="Loading"> <circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle> <path d="M12 2a10 10 0 0 1 10 10" stroke-opacity="1"></path> </svg> </div> <!-- Color Variants --> <div class="flex items-center gap-6"> <svg class="size-6 animate-spin text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="status" aria-label="Loading"> <circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle> <path d="M12 2a10 10 0 0 1 10 10" stroke-opacity="1"></path> </svg> <svg class="size-6 animate-spin text-green-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="status" aria-label="Loading"> <circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle> <path d="M12 2a10 10 0 0 1 10 10" stroke-opacity="1"></path> </svg> <svg class="size-6 animate-spin text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="status" aria-label="Loading"> <circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle> <path d="M12 2a10 10 0 0 1 10 10" stroke-opacity="1"></path> </svg> </div> <!-- Button with Spinner --> <div class="flex flex-col items-start gap-4"> <button class="btn-sm" disabled> <svg class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="status" aria-label="Loading"> <circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle> <path d="M12 2a10 10 0 0 1 10 10" stroke-opacity="1"></path> </svg> Loading... </button> <button class="btn-sm-outline" disabled> <svg class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="status" aria-label="Loading"> <circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle> <path d="M12 2a10 10 0 0 1 10 10" stroke-opacity="1"></path> </svg> Please wait </button> </div> <!-- Badge with Spinner --> <div class="flex items-center gap-4"> <span class="badge"> <svg class="size-3 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="status" aria-label="Loading"> <circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle> <path d="M12 2a10 10 0 0 1 10 10" stroke-opacity="1"></path> </svg> Syncing </span> <span class="badge-secondary"> <svg class="size-3 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="status" aria-label="Loading"> <circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle> <path d="M12 2a10 10 0 0 1 10 10" stroke-opacity="1"></path> </svg> Updating </span> </div> </div>