@roadtrip/css/styles/components/_skeleton-screen.css

CSS framework for Roadtrip Design System

/*
 * Skeleton Screen
 *
 * Index
 * - Skeleton
 * - Skeleton animation
 *
 */


/* SKELETON
 -------------------- */

.skeleton {
  position: relative;
  display: block;
  width: 100%;
  min-height: 1rem;
  background: linear-gradient(to right, var(--road-surface-disabled) 8%, rgb(137, 143, 160, 0.4) 18%, var(--road-surface-disabled) 33%);
  background-position: 100% 0;
  background-size: 200%;
  animation: road-skeleton-animation 1s linear infinite;
}

.skeleton.text-content,
.skeleton.h2  {
  height: 1.875rem;
  margin-bottom: 12px;
}

/* SKELETON ANIMATION
 -------------------- */

@keyframes road-skeleton-animation {

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