zent/css/placeholder.css

一套前端设计语言和基于React的实现

.zent-placeholder-shape[data-zv="10.0.18"] {
  background-color: #f7f7f7;
}
.zent-placeholder-shape--animate[data-zv="10.0.18"] {
  animation: zent-ani-placeholder-bg-v10x0x18 2s linear infinite;
  background: linear-gradient(to right, rgba(247, 247, 247, 0.7), #f7f7f7, #f7f7f7);
  background: linear-gradient(to right, rgba(var(--theme-rgb-body-bg, var(--theme-rgb-stroke-7, 247, 247, 247)), 0.7), var(--theme-body-bg, var(--theme-stroke-7, #f7f7f7)), var(--theme-body-bg, var(--theme-stroke-8, #f7f7f7)));
  background-size: 300% 300%;
}

.zent-placeholder-text-row[data-zv="10.0.18"],
.zent-placeholder-text-row-dashed[data-zv="10.0.18"] .zent-placeholder-shape {
  width: 100%;
  height: 1em;
}

.zent-placeholder-text-row-dashed[data-zv="10.0.18"] {
  display: flex;
}
.zent-placeholder-text-row-dashed-segment[data-zv="10.0.18"] {
  box-sizing: border-box;
}

.zent-placeholder-circle[data-zv="10.0.18"] {
  border-radius: 50%;
}

@keyframes zent-ani-placeholder-bg-v10x0x18 {
  0%, 100% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}