@postnord/web-components/collection/components/feedback/pn-skeleton-loader/pn-skeleton-loader.css

PostNord Web Components

/* Global utility variables */
/* Input styles */
/* Transition variables */
@keyframes pn-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
pn-skeleton-loader {
  display: block;
  background: transparent;
}

pn-skeleton-loader .pn-skeleton-loader {
  background: linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);
  background-size: 200% 100%;
  animation: pn-shimmer 1.5s infinite ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  pn-skeleton-loader .pn-skeleton-loader {
    animation: none;
  }
}
pn-skeleton-loader .pn-skeleton-loader--box {
  width: 100%;
  height: 100%;
  min-height: 3em;
  min-width: 10em;
  border-radius: 0.5em;
}
pn-skeleton-loader .pn-skeleton-loader--card {
  width: 100%;
  min-width: 10em;
  border-radius: 0.5em;
  box-shadow: 0em 0.0625em 0.125em 0em rgba(20, 20, 20, 0.11), 0em 0.1875em 0.4375em 0em rgba(0, 0, 0, 0.13);
  background: #ffffff;
  animation: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
pn-skeleton-loader .pn-skeleton-loader-card-image {
  width: 100%;
  height: 10em;
  clip-path: ellipse(175% 100% at top center);
  background: linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);
  background-size: 200% 100%;
  animation: pn-shimmer 1.5s infinite ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  pn-skeleton-loader .pn-skeleton-loader-card-image {
    animation: none;
  }
}
pn-skeleton-loader .pn-skeleton-loader-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: clamp(0.75em, 5vw, 1.5em);
}
pn-skeleton-loader .pn-skeleton-loader--tile {
  width: 100%;
  border-radius: 0.5em;
  box-shadow: 0em 0.0625em 0.125em 0em rgba(20, 20, 20, 0.11), 0em 0.1875em 0.4375em 0em rgba(0, 0, 0, 0.13);
  background: #ffffff;
  animation: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(0.75em, 3vw, 1.5em);
  gap: clamp(1em, 5vw, 1.5em);
  text-align: center;
}
pn-skeleton-loader .pn-skeleton-loader-tile-circle {
  width: 7em;
  height: 7em;
  border-radius: 50%;
  background: linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);
  background-size: 200% 100%;
  animation: pn-shimmer 1.5s infinite ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  pn-skeleton-loader .pn-skeleton-loader-tile-circle {
    animation: none;
  }
}
pn-skeleton-loader .pn-skeleton-loader-tile-content {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: 100%;
}
pn-skeleton-loader .pn-skeleton-loader--header {
  width: 100%;
  background: none;
  animation: none;
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: clamp(1em, 3vw, 2em) clamp(0.5em, 3vw, 2em);
}
pn-skeleton-loader .pn-skeleton-loader-header-back {
  width: 5em;
  height: 1em;
  border-radius: 0.25em;
  background: linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);
  background-size: 200% 100%;
  animation: pn-shimmer 1.5s infinite ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  pn-skeleton-loader .pn-skeleton-loader-header-back {
    animation: none;
  }
}
pn-skeleton-loader .pn-skeleton-loader-header-heading {
  width: 40%;
  height: 2em;
  border-radius: 0.25em;
  background: linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);
  background-size: 200% 100%;
  animation: pn-shimmer 1.5s infinite ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  pn-skeleton-loader .pn-skeleton-loader-header-heading {
    animation: none;
  }
}
pn-skeleton-loader .pn-skeleton-loader-header-subheading {
  width: 30%;
  height: 1em;
  border-radius: 0.25em;
  background: linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);
  background-size: 200% 100%;
  animation: pn-shimmer 1.5s infinite ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  pn-skeleton-loader .pn-skeleton-loader-header-subheading {
    animation: none;
  }
}
pn-skeleton-loader .pn-skeleton-loader--chip {
  display: inline-block;
  width: 6em;
  height: 2.5em;
  border-radius: 0.5em;
}
pn-skeleton-loader .pn-skeleton-loader--chip.pn-skeleton-loader--small {
  height: 2em;
  width: 5em;
}
pn-skeleton-loader .pn-skeleton-loader--chip.pn-skeleton-loader--large {
  height: 2.875em;
  width: 7em;
}
pn-skeleton-loader .pn-skeleton-loader--input {
  width: 100%;
  min-width: 10em;
  height: 3em;
  border-radius: 0.5em;
}
pn-skeleton-loader .pn-skeleton-loader--avatar {
  width: 3em;
  height: 3em;
  border-radius: 50%;
}
pn-skeleton-loader .pn-skeleton-loader--button {
  display: inline-block;
  min-width: 5.5em;
  height: 3em;
  border-radius: 3em;
}
pn-skeleton-loader .pn-skeleton-loader--automatic {
  position: relative;
  background: none;
  animation: none;
  pointer-events: none;
}
pn-skeleton-loader .pn-skeleton-loader--automatic * {
  color: transparent !important;
  text-shadow: none !important;
}
pn-skeleton-loader .pn-skeleton-loader--automatic img,
pn-skeleton-loader .pn-skeleton-loader--automatic svg,
pn-skeleton-loader .pn-skeleton-loader--automatic pn-icon,
pn-skeleton-loader .pn-skeleton-loader--automatic pn-illustration {
  visibility: hidden;
}
pn-skeleton-loader .pn-skeleton-loader--automatic [data-skeleton] {
  position: relative;
  overflow: hidden;
}
pn-skeleton-loader .pn-skeleton-loader--automatic [data-skeleton]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);
  background-size: 200% 100%;
  animation: pn-shimmer 1.5s infinite ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  pn-skeleton-loader .pn-skeleton-loader--automatic [data-skeleton]::after {
    animation: none;
  }
}
pn-skeleton-loader .pn-skeleton-loader--automatic [data-skeleton=avatar] {
  border-radius: 50%;
  overflow: hidden;
}
pn-skeleton-loader .pn-skeleton-loader--automatic [data-skeleton=button] {
  border-radius: 3em;
  min-height: 3em;
  min-width: 5.5em;
}
pn-skeleton-loader .pn-skeleton-loader--automatic [data-skeleton=button] * {
  visibility: hidden;
}
pn-skeleton-loader .pn-skeleton-loader--automatic [data-skeleton=chip] {
  border-radius: 0.5em;
  min-height: 2.5em;
  min-width: 4em;
}
pn-skeleton-loader .pn-skeleton-loader--automatic [data-skeleton=chip] * {
  visibility: hidden;
}
pn-skeleton-loader .pn-skeleton-loader--automatic [data-skeleton=text]::after {
  display: none;
}
pn-skeleton-loader .pn-skeleton-loader--automatic [data-skeleton=text] > * {
  position: relative;
  overflow: hidden;
  border-radius: 0.25em;
}
pn-skeleton-loader .pn-skeleton-loader--automatic [data-skeleton=text] > *::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.25em;
  background: linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);
  background-size: 200% 100%;
  animation: pn-shimmer 1.5s infinite ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  pn-skeleton-loader .pn-skeleton-loader--automatic [data-skeleton=text] > *::after {
    animation: none;
  }
}
pn-skeleton-loader .pn-skeleton-loader--text {
  width: 100%;
  min-width: 10em;
  height: 1em;
  border-radius: 0.25em;
}
pn-skeleton-loader .pn-skeleton-loader--paragraph {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  min-width: 10em;
  background: none;
  animation: none;
}
pn-skeleton-loader .pn-skeleton-loader--table {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  min-width: 10em;
  background: none;
  animation: none;
  border-radius: 0.5em;
}
pn-skeleton-loader .pn-skeleton-loader-table-header {
  width: 100%;
  height: 4em;
  border-radius: 0.5em 0.5em 0 0;
  background: linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);
  background-size: 200% 100%;
  animation: pn-shimmer 1.5s infinite ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  pn-skeleton-loader .pn-skeleton-loader-table-header {
    animation: none;
  }
}
pn-skeleton-loader .pn-skeleton-loader-table-row {
  width: 100%;
  height: 3em;
  background: linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);
  background-size: 200% 100%;
  animation: pn-shimmer 1.5s infinite ease-in-out;
}
pn-skeleton-loader .pn-skeleton-loader-table-row:last-child {
  border-radius: 0 0 0.5em 0.5em;
}
@media (prefers-reduced-motion: reduce) {
  pn-skeleton-loader .pn-skeleton-loader-table-row {
    animation: none;
  }
}
pn-skeleton-loader .pn-skeleton-loader-line {
  width: 100%;
  height: 1em;
  border-radius: 0.25em;
  background: linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);
  background-size: 200% 100%;
  animation: pn-shimmer 1.5s infinite ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  pn-skeleton-loader .pn-skeleton-loader-line {
    animation: none;
  }
}