.vue-skeleton-loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-mask;
  font-size: 12px;
  background: #fff;
  @keyframes backpos {
    from {
      background-position-x: -200px;
    }
    to {
      background-position-x: calc(200px + 100%);
    }
  }
  .skeleton-bac-animation {
    position: absolute;
    z-index: auto;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%);
    background-size: 30% 100%;
    background-repeat: no-repeat;
    -webkit-animation: backpos 0.9s ease-in-out 0s infinite;
    animation: backpos 0.9s ease-in-out 0s infinite;
  }
  .skeleton-bac-content {
    overflow: hidden;
  }
}

.vue-skeleton-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vue-skeleton-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.vue-skeleton-square-wrap {
  justify-content: center;
  display: flex;
  flex-direction: column;
  .vue-skeleton-square {
    width: 100%;
  }
}