element 中loading颜色的修改

最新推荐文章于 2024-09-27 14:47:38 发布

原创最新推荐文章于 2024-09-27 14:47:38 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

ui组件专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何修改HTML加载动画中的遮罩层、图标及文字颜色。通过调整CSS样式，将遮罩层背景颜色改为淡灰色，图标线条颜色设置为深绿色，并将文字颜色也更改为深绿色，从而实现个性化加载效果。

修改loading的颜色

loading中的源码如下

<div class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0.8);">
  <div class="el-loading-spinner">
    <i class="el-icon-loading"></i>
    <p class="el-loading-text">拼命加载中</p>
  </div>
</div>

修改遮罩层、图标、文字的颜色

//设置遮罩层颜色
.el-loading-mask{
  background-color: rgba(0,0,0,0.2);
}
//设置图标颜色
.el-loading-spinner .path{
  stroke: #005432;
}
//设置文字颜色
.el-loading-spinner .el-loading-text{
  color: #005432;
}