如何自定义CSS Loader的颜色-html教程-PHP中文网

如何自定义CSS Loader的颜色

花韻仙語

发布： 2025-10-09 11:57:14

原创

197人浏览过

如何自定义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的颜色设置为红色，您可以将代码修改为：

立即学习“前端免费学习笔记（深入）”；

AI角色脑洞生成器

一键打造完整角色设定，轻松创造专属小说漫画游戏角色背景故事

176

查看详情

.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>

登录后复制

在这个示例中，我们修改了.lds-ripple div的border属性，将其颜色设置为red。 <script> 标签中的代码用于在页面加载时显示loader。

注意事项

确保您的CSS规则能够正确应用到Loader元素上。
您可以使用任何有效的CSS颜色值，例如颜色名称（red、blue等）、十六进制颜色代码（#FF0000、#0000FF等）或RGB/RGBA值。
如果Loader颜色没有改变，请检查CSS的优先级，确保您的自定义样式没有被其他样式覆盖。

总结

通过修改.lds-ripple div的border属性，您可以轻松地自定义CSS Loader的颜色，使其更符合您的网站或应用程序的视觉风格。这个简单的修改可以显著提升用户体验，使您的Loader更具吸引力。

以上就是如何自定义CSS Loader的颜色的详细内容，更多请关注php中文网其它相关文章！