How to color the CSS loader? - html

Question

I have working code for a CSS preloader at CSS preloader sample
I would like the animated preloader to be colored. I tried adding the style color: red !important; to various styles to the CSS class lds-ripple, but it did nothing.
A colored preloader would look more impressive in my view.
How would I make the CSS preloader show with colored rings?
the same code from working sample is also pasted below.
<button id="btnShow" onclick="showLoader()">Show Loader</button>
<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 #fff;
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";
}
</script>

Answer 1

#fff in the line marked below can be changed to set the loader's color.
.lds-ripple div {
position: absolute;
border: 4px solid #fff; /* edit this line */
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
For example:
function showLoader() {
document.getElementById("loader").style.display = "flex";
}
showLoader();
#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;
}
}
<div id="loader">
<div class="lds-ripple"><div></div><div></div></div>
</div>

Answer 2

For changing color animation:
#keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
border-color: red;
}
4.9% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
border-color: red;
}
5% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
border-color: red;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
border-color: blue;
}
}
The problem is that the divs inside the lds-ripple have no dimension into it. So the color property won't have any effect. However, the border-color will still work. So you can replace the default #fff color with something like red. For example:
.lds-ripple div {
position: absolute;
border: 4px solid red; /* HERE */
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
function showLoader() {
document.getElementById("loader").style.display = "flex";
}
#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; /* HERE */
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;
border-color: red;
}
4.9% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
border-color: red;
}
5% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
border-color: red;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
border-color: blue;
}
}
<button id="btnShow" onclick="showLoader()">Show Loader</button>
<div id="loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>