css loading加载动画

<div class="wrap">
    <div class="cover">
        <p class="hint">error</p>
    </div>
    <div class="spinner">
        <div class="spinner_load">
            <div class="bounce bounce1"></div>
            <div class="bounce bounce2"></div>
            <div class="bounce bounce3"></div>
        </div>
    </div>
</div>
html,body
  background-color transparent
  overflow-x hidden
    .cover
      display none
      position fixed
      width 100%
      height 100%
      top: 0
      left 0
      z-index 99999
      touch-action none
      background-color: rgba(0,0,0,0.7)
      .hint
        position absolute
        width 88%
        padding 20px 0
        top 50%
        left 50%
        margin-top (-@height/2)px
        margin-left -(@width/2)%
        word-wrap break-word
        border-radius 20px
        font-size 28px
        background-color #666666
        text-align center
        color #ffffff
.spinner
  // display none
  position fixed
  left 0
  top 0
  z-index 999
  width 100%
  height 100%
  touch-action none
  background-color: rgba(0,0,0,0.7)
  text-align center
  .spinner_load
    position absolute
    top 50%
    left 50%
    transform translate(-50%,-50%)
  .bounce
    width: 30px
    height: 30px
    background-color: #ffc363
    border-radius: 100%
    display: inline-block
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out
    animation: bouncedelay 1.4s infinite ease-in-out
    /* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both
    animation-fill-mode: both
  .bounce1
    -webkit-animation-delay: -0.32s
    animation-delay: -0.32s
  .bounce2
    -webkit-animation-delay: -0.16s
    animation-delay: -0.16s
@-webkit-keyframes bouncedelay
  0%, 80%, 100% {
    -webkit-transform: scale(0.0)
  }
  40% {
    -webkit-transform: scale(1.0)
  }

@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }
  40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容