Код IT Загрузка примера кода…

CSS main.css
.card-skeleton {
  width: 18rem;
  padding: 1rem;
  border-radius: 0.8rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-skeleton__line {
  height: 0.875rem;
  margin-bottom: 0.75rem;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    #e9ecef 0,
    #f8f9fa 40%,
    #e9ecef 80%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.card-skeleton__line--title {
  height: 1.25rem;
  width: 70%;
}

.card-skeleton__line--short {
  width: 55%;
  margin-bottom: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  .card-skeleton__line {
    animation: none;
    background: #e9ecef;
  }
}
.card-skeleton {
  width: 18rem;
  padding: 1rem;
  border-radius: 0.8rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-skeleton__line {
  height: 0.875rem;
  margin-bottom: 0.75rem;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    #e9ecef 0,
    #f8f9fa 40%,
    #e9ecef 80%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.card-skeleton__line--title {
  height: 1.25rem;
  width: 70%;
}

.card-skeleton__line--short {
  width: 55%;
  margin-bottom: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  .card-skeleton__line {
    animation: none;
    background: #e9ecef;
  }
}