美文网首页
Vue 开发一个loading

Vue 开发一个loading

作者: ER_PM | 来源:发表于2019-11-04 15:13 被阅读0次
    loading效果图

    非常简单,其实就是设置border,然后一个无限旋转的动画。

    <template>
      <div class="loading-indicator">
        <div class="animation"></div>
      </div>
    </template>
    
    <style  >
    .loading-indicator {
      padding: 100px;
    }
    .animation {
      display: inline-block;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: transparent 2px solid;
      border-color: rgba(164, 76, 246, 0.1);
      border-right-color: #aa00ff;
      animation: rotating 0.7s linear infinite;
    }
    @keyframes rotating {
      form {
        transform: rotate(0);
      }
      to {
        transform: rotate(360deg);
      }
    }
    </style>
    

    相关文章

      网友评论

          本文标题:Vue 开发一个loading

          本文链接:https://www.haomeiwen.com/subject/mzldbctx.html