loadingbeginner

Skeleton Loading

Animated placeholder showing while content loads.

Preview

Tailwind Classes

animate-pulse bg-gray-200 rounded

CSS Code

.skeleton {
  background: #e5e7eb;
  border-radius: 0.25rem;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

HTML Example

<div class="space-y-3">
  <div class="animate-pulse bg-gray-200 rounded h-4 w-3/4"></div>
  <div class="animate-pulse bg-gray-200 rounded h-4 w-1/2"></div>
  <div class="animate-pulse bg-gray-200 rounded h-4 w-5/6"></div>
</div>

Use Cases

Content loadingImage placeholdersList itemsCards

Browser Support

All modern browsers

#loading#skeleton#animation#ux