html 叠加和微调器加载动画。

Posted 2021-05-11

// <div> progress overlay
.progress {
  @include fill_parent();
  @include flex_container(horizontal);
  @include flex_pack(center);
  @include flex_align(center);
  background-color: rgba(gray, .86);
  z-index: 10;

  &__inner {
    height: 40px;
    width: 40px;

    &::after {
      animation: rotate 600ms linear infinite;
      border: 1px solid white;
      border-top-color: orange;
      border-radius: 50%;
      content: '';
      display: block;
      height: 3rem;
      margin: -1.5rem 0 0 -1.5rem;
      position: absolute;
      left: 50%;
      top: 50%;
      width: 3rem;
      z-index: 12;
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

<div
  class="progress  animated  fadeIn"
  data-ng-if="vm.foo"
>
  <div class="progress__inner  animated  bounceIn"></div>
</div>