如何自定义CSS Loader的颜色_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何自定义CSS Loader的颜色

2025-10-09

浏览次数：次

返回列表

如何自定义css loader的颜色

本文将指导您如何通过简单的CSS修改，自定义CSS Loader的颜色。通过修改.lds-ripple div的border属性，您可以轻松地改变Loader的颜色，使其更符合您的网站或应用程序的视觉风格。本文将提供详细的步骤和示例代码，帮助您快速实现自定义颜色的CSS Loader。

修改Loader颜色

要改变CSS Loader的颜色，您需要找到.lds-ripple div的CSS规则，并修改其border属性。border属性定义了Loader中圆环的颜色。

以下是原始CSS代码片段：

.lds-ripple div {
  position: absolute;
  border: 4px solid #fff; /* 默认颜色为白色 */
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

将border属性中的颜色值#fff替换为您想要的颜色。例如，要将Loader的颜色设置为红色，您可以将代码修改为：

Koobi Pro

主要功能：无限级分类，商品可在各类别间自由转移；组合商品概念，可以用于组配商品销售（比如服装鞋帽的颜色、尺码大小等），组合销售等销售方式；商品的自定义属性功能，商品类别扩展属性，满足商品多属性需求（比如某一笔记本电脑，可以有cpu、内存、显示屏、硬盘等等扩展属性）；按照商品类别查看热卖、特价，允许按每个类别增加当前类别的热卖、特价等商品；会员分级功能，会员积分功能。可根据会

0 查看详情 Koobi Pro

.lds-ripple div {
  position: absolute;
  border: 4px solid red; /* 修改颜色为红色 */
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

完整示例

以下是一个完整的示例，展示了如何将CSS Loader的颜色设置为红色：

<div id="loader">
  <div class="lds-ripple"><div></div><div></div></div>
</div>

<style>
#loader {
  display: none;
  justify-content: center;
  align-items: center; 
  width:100%;
  height:100%;
  border:green solid 1 px;
  opacity:0.9;
  background-color:whitesmoke;
  position:absolute;
  left:0;
  top:0;
 }
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid red; /* 修改颜色为红色 */
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 }
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  4.9% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  5% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}
</style>

<script>
function showLoader() {
  document.getElementById("loader").style.display = "flex";
}
showLoader(); // 页面加载时显示loader
</script>