Loading State and Skeleton Colors in Tailwind CSS

Loading State Color Principles

Loading states should feel quiet and unobtrusive. Use neutral, low-contrast colors that hint at the final content shape without demanding attention. Animation provides the signal that content is coming.

Skeleton Screen Pattern

<!-- Skeleton card -->
<div class="bg-white rounded-xl p-6 shadow-sm border border-slate-200">
  <div class="animate-pulse space-y-4">
    <div class="h-4 bg-slate-200 rounded w-3/4"></div>
    <div class="h-3 bg-slate-200 rounded w-full"></div>
    <div class="h-3 bg-slate-200 rounded w-5/6"></div>
    <div class="flex gap-3 mt-4">
      <div class="h-8 bg-slate-200 rounded w-20"></div>
      <div class="h-8 bg-slate-100 rounded w-16"></div>
    </div>
  </div>
</div>

<!-- Dark mode skeleton -->
<div class="dark:bg-slate-800 rounded-xl p-6">
  <div class="animate-pulse space-y-4">
    <div class="h-4 bg-slate-700 rounded w-3/4"></div>
    <div class="h-3 bg-slate-700 rounded w-full"></div>
  </div>
</div>

Progress Indicators

<!-- Progress bar -->
<div class="w-full bg-slate-200 rounded-full h-2">
  <div class="bg-blue-600 h-2 rounded-full transition-all duration-500" style="width: 65%"></div>
</div>

<!-- Spinner -->
<div class="w-8 h-8 border-4 border-slate-200 border-t-blue-600 rounded-full animate-spin"></div>

Color Guidelines

• Skeleton blocks: slate-200 on white, slate-700 on dark backgrounds
• Never use brand colors for skeletons as it creates visual noise
• Progress bars: Brand color (blue-600) on slate-200 track
• Spinners: slate-200 track with brand-colored leading edge
• Keep skeleton contrast low to signal 'placeholder, not content'