@opensig/opendesign/lib/skeleton/style/index.css

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

.o-skeleton {
  --skeleton-bg-color: var(--o-color-control2-light);
}

.o-skeleton-animation {
  --skeleton-bg-color: linear-gradient(90deg, var(--o-color-control2-light) 25%, var(--o-color-control3-light) 37%, var(--o-color-control2-light) 63%);
}

.o-skeleton-item {
  --skeleton-item-gap: 24px;
}

.o-skeleton-text {
  --skeleton-width: 100%;
  --skeleton-height: var(--o-font_size-text1);
  --skeleton-radius: var(--o-radius_control-xs);
  --skeleton-last-line-width: 50%;
  --skeleton-line-gap: calc(var(--o-line_height-text1) - var(--o-font_size-text1));
}

.o-skeleton-figure {
  --skeleton-width: 320px;
  --skeleton-height: 180px;
  --skeleton-radius: var(--o-radius_control-xs);
}

.o-skeleton-avatar {
  --skeleton-radius: var(--o-radius_control-xs);
}

.o-skeleton-avatar-large {
  --skeleton-width: 80px;
  --skeleton-height: 80px;
}

.o-skeleton-avatar-medium {
  --skeleton-width: 64px;
  --skeleton-height: 64px;
}

.o-skeleton-avatar-small {
  --skeleton-width: 40px;
  --skeleton-height: 40px;
}

.o-skeleton-avatar-mini {
  --skeleton-width: 24px;
  --skeleton-height: 24px;
}

.o-skeleton-round-pill {
  --skeleton-radius: var(--skeleton-height);
}

@keyframes o-skeleton-ani {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
.o-skeleton-text {
  list-style: none;
  margin: 0;
  padding: 0;
  width: var(--skeleton-width);
}

.o-skeleton-line {
  width: 100%;
  height: var(--skeleton-height);
  border-radius: var(--skeleton-radius);
  background: var(--skeleton-bg-color);
}

.o-skeleton-line:last-child:not(:first-child) {
  width: var(--skeleton-last-line-width);
}

.o-skeleton-line + .o-skeleton-line {
  margin-top: var(--skeleton-line-gap);
}

.o-skeleton-avatar,
.o-skeleton-figure {
  width: var(--skeleton-width);
  height: var(--skeleton-height);
  border-radius: var(--skeleton-radius);
  background: var(--skeleton-bg-color);
}

.o-skeleton-animation .o-skeleton-avatar,
.o-skeleton-animation .o-skeleton-figure,
.o-skeleton-animation .o-skeleton-line {
  background-size: 400% 100%;
  animation: o-skeleton-ani 1.4s var(--o-easing-linear) infinite;
}

.o-skeleton-item + .o-skeleton-item {
  margin-top: var(--skeleton-item-gap);
}

@media (max-width: 1440px) {
  .o-skeleton-avatar-large {
    --skeleton-width: 64px;
    --skeleton-height: 64px;
  }
  .o-skeleton-avatar-medium {
    --skeleton-width: 48px;
    --skeleton-height: 48px;
  }
  .o-skeleton-avatar-small {
    --skeleton-width: 32px;
    --skeleton-height: 32px;
  }
}
@media (max-width: 1200px) {
  .o-skeleton-avatar-medium {
    --skeleton-width: 40px;
    --skeleton-height: 40px;
  }
}