@ionic/core

Version:
Base components for Ionic
53 lines (49 loc) • 1.43 kB
CSS
:host {
  /**
   * @prop --background: Background of the skeleton text
   * @prop --background-rgb: Background of the skeleton text in rgb format
   *
   * @prop --border-radius: Border radius of the skeleton text
   */
  --background: rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065);
  border-radius: var(--border-radius, inherit);
  display: block;
  width: 100%;
  height: inherit;
  margin-top: 4px;
  margin-bottom: 4px;
  background: var(--background);
  line-height: 10px;
  user-select: none;
  pointer-events: none;
}

span {
  display: inline-block;
}

:host(.in-media) {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  height: 100%;
}

:host(.skeleton-text-animated) {
  position: relative;
  background: linear-gradient(to right, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065) 8%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.135) 18%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065) 33%);
  background-size: 800px 104px;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
}

/* stylelint-disable property-disallowed-list */
@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
/* stylelint-enable property-disallowed-list */