reactbits-mcp-server/src/css/skeleton.css

MCP Server for React Bits - Access 99+ React components with animations, backgrounds, and UI elements

.skeleton-pulse {
  background: linear-gradient(110deg, #e2e8f0 8%, #f1f5f9 18%, #e2e8f0 33%);
  background-size: 200% 100%;
  animation: shimmer 1s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.skeleton-pulse::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.6),
      transparent);
  animation: shimmer-overlay 1s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes shimmer-overlay {
  0% {
    left: -100%;
  }

  50% {
    left: 100%;
  }

  100% {
    left: 100%;
  }
}

@media (prefers-color-scheme: dark) {
  .skeleton-pulse {
    background: linear-gradient(110deg, #374151 8%, #4b5563 18%, #374151 33%);
  }

  .skeleton-pulse::before {
    background: linear-gradient(90deg,
        transparent,
        rgba(82, 39, 255, 0.05),
        transparent);
  }
}

.skeleton-loader {
  user-select: none;
  pointer-events: none;
  border-radius: 4px;
}

.skeleton-content {
  width: 100%;
}