zent/css/placeholder.css

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

.zent-placeholder-shape {
  background-color: #f7f7f7;
}
.zent-placeholder-shape--animate {
  animation: zent-ani-placeholder-bg 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,
.zent-placeholder-text-row-dashed .zent-placeholder-shape {
  width: 100%;
  height: 1em;
}

.zent-placeholder-text-row-dashed {
  display: flex;
}
.zent-placeholder-text-row-dashed-segment {
  box-sizing: border-box;
}

.zent-placeholder-circle {
  border-radius: 50%;
}

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