yu.css.ui/css/component/placeholder.css

纯CSS通用UI模块和组件

.yu-placeholder {
  display: flex; }

@keyframes progress-active {
  0% {
    opacity: 0;
    width: 0; }
  20% {
    opacity: 0.5;
    width: 0; }
  100% {
    opacity: 0;
    width: 100%; } }
  .yu-placeholder .image {
    flex-shrink: 0;
    vertical-align: top;
    display: inline-block;
    width: 60px;
    height: 60px;
    background: #f5f5f9;
    position: relative;
    box-sizing: content-box;
    margin-right: 14px;
    margin-bottom: 14px; }
  .yu-placeholder ul {
    vertical-align: top;
    width: 100%;
    margin: 0;
    padding-inline-start: 0;
    padding: 0; }
    .yu-placeholder ul > li {
      list-style: none; }
    .yu-placeholder ul li {
      width: 100%;
      height: 16px;
      background-color: #f5f5f9;
      position: relative;
      margin-bottom: 14px; }
      .yu-placeholder ul li.short {
        width: 60%; }
      .yu-placeholder ul li.normal {
        width: 70%; }
      .yu-placeholder ul li.long {
        width: 80%; }
  .yu-placeholder.active .image:before {
    content: "";
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    animation: progress-active 1.5s ease infinite; }
  .yu-placeholder.active ul li:before {
    content: "";
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    animation: progress-active 1.5s ease infinite; }