element 手写el-loading加载样式

得得得得得得得得。

已于 2022-04-22 14:16:01 修改

阅读量777

点赞数 1

文章标签： html elementui vue

于 2022-04-22 14:10:06 首次发布

本文链接：https://blog.csdn.net/wangxu133061/article/details/124344215

版权

这段代码展示了如何在Vue中利用ElementUI库创建一个全屏加载效果。通过`v-if`控制加载状态，结合`.el-loading-mask`和`.el-loading-spinner`类实现加载遮罩和旋转图标，提供用户友好的界面反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

class样式使用的是element ui样式

<div v-if="loading" class="el-loading-mask" style="width: 100%;height: 100%;margin: 0 auto;">
  <div class="el-loading-spinner">
    <svg viewBox="25 25 50 50" class="circular">
      <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
    </svg>
  </div>
</div>