html 用Sass加载占位符

Posted 2021-05-10

@mixin nth-children($points...) {
    @each $point in $points {
        &:nth-child(#{$point}) {
            @content;
        }
    }
}

.text-input__loading {
    height: 214px;
    border: 1px solid lightgrey;
    border-radius: 4px;
    width: 100%;

    &--line {
        height: 10px;
        margin: 10px;
        animation: pulse 1s infinite ease-in-out;
    }

    div {
        @include nth-children(1, 5, 9) {
            width: 150px;
        }
        @include nth-children(2, 6, 10) {
            width: 250px;
        }
        @include nth-children(3, 7) {
            width: 50px;
        }
        @include nth-children(4, 8) {
            width: 100px;
        }
    }
}

@keyframes pulse {
    0% {
        background-color: rgba(165, 165, 165, 0.1)
    }
    50% {
        background-color: rgba(165, 165, 165, 0.3)
    }
    100% {
        background-color: rgba(165, 165, 165, 0.1)
    }
}

Loading Placeholder with Sass
-----------------------------


A [Pen](https://codepen.io/leerob/pen/XzRzpb) by [Lee Robinson](https://codepen.io/leerob) on [CodePen](https://codepen.io).

[License](https://codepen.io/leerob/pen/XzRzpb/license).

<div class='text-input__loading'>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
</div>