Notifications

3 new

Marcus Silva assigned you to Q3 Revenue Report

10 minutes ago

Emma Wilson commented on Homepage Redesign

45 minutes ago

James Miller mentioned you in Sprint Planning

2 hours ago

Sarah Chen uploaded Q2 Analytics Deck

3 hours ago

David Kim requested review on API Integration PR

5 hours ago

View all notifications

Spinners

Loading spinner examples.

SVG Spinners

<svg class="animate-spin w-8 h-8 text-alpine-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0..."></path>
</svg>

Sizes

w-4 h-4

w-6 h-6

w-8 h-8

w-10 h-10

w-12 h-12

<div class="text-center">
  <svg class="animate-spin w-8 h-8 text-alpine-500 mx-auto" ...>...</svg>
  <span class="block text-xs text-gray-500 mt-2">w-8 h-8</span>
</div>

Button Spinners

<button class="inline-flex items-center gap-2 bg-alpine-500 hover:bg-alpine-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium transition-colors cursor-not-allowed opacity-75">
  <svg class="animate-spin w-4 h-4 text-white" ...>...</svg>
  Loading...
</button>

Growing Spinner

<span class="relative flex h-6 w-6">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-alpine-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-6 w-6 bg-alpine-500"></span>
</span>