zarm/es/skeleton/style/index.css

基于 React 的移动端UI库

.za-skeleton {
  --width: var(--za-skeleton-width, 100%);
  --height: var(--za-skeleton-height, 18px);
  --border-radius: var(--za-skeleton-border-radius, 2px);
  --margin: var(--za-skeleton-margin, 0);
  --background: var(--za-skeleton-background, rgba(190, 190, 190, 0.2));
  --animated-background: var(--za-skeleton-animated-background, rgba(129, 129, 129, 0.24));
  width: var(--width);
  height: var(--height);
  margin: var(--margin);
  background: var(--background);
}
.za-skeleton--radius {
  border-radius: var(--border-radius);
}

.za-skeleton--rect {
  border-radius: 0;
}

.za-skeleton--circle {
  --width: var(--za-skeleton-width, 50px);
  --height: var(--za-skeleton-height, 50px);
  border-radius: 50%;
}

.za-skeleton--animated {
  background: linear-gradient(90deg, var(--background) 25%, var(--animated-background) 37%, var(--background) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
.za-skeleton__title {
  --width: var(--za-skeleton-width, 45%);
  --height: var(--za-skeleton-height, 32px);
  --margin: var(--za-skeleton-margin, 16px 0);
}

.za-skeleton__paragraph .za-skeleton__line {
  --margin: var(--za-skeleton-margin, 12px 0);
}
.za-skeleton__paragraph .za-skeleton__line:last-of-type {
  width: 65%;
}