CSS Skeleton Loader

css Coder B

Animated shimmer placeholder for loading states. Drop the .skeleton class on any element and size it with utility styles.

css
  .skeleton {
    background: #2a2a2a;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }

  .skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    animation: shimmer 1.5s infinite;
  }

  @keyframes shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  .skeleton-text {
    height: 1em;
    margin-bottom: 0.5rem;
  }

  .skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
  }

Feedback (0)