How to change preloader color - Forum | JoomShaper
Solved Helix Framework

How to change preloader color

Asked by Robert Deutschmann 5 years ago Last activity 5 years ago

Hi

How can i change the preloader color. I would like to change the color of the preloader type "Two Circles" from red to blue.
I tried to set the custom.css like this:

body,.sp-preloader {
background-color: #fff;
color: #2d5dfa;
}
.sp-preloader > div {
background: #2d5dfa;
}
.sp-preloader > div:after {
background: #fff;
}

But no effect.

Any idea how to do it?

Thanks and br,
Robert

Accepted answer

Marked as the solution
Rashida Rahman Staff
5 years ago

Hello there!

Thanks for your query.

Please use the following code in your custom CSS:

.sp-pre-loader .circle-two>span, .sp-pre-loader .circle-two>span:before, .sp-pre-loader .circle-two>span:after{
border: 2px solid blue;}

.sp-pre-loader .circle-two>span{
border-left-color: transparent;}

.sp-pre-loader .circle-two>span:before{
border-right-color: transparent;}

.sp-pre-loader .circle-two>span:after{
border-bottom-color: transparent;}

Note: Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Hope this helps!

Best Regards

2 more replies

Oldest first Newest first Most helpful
Robert Deutschmann Asked this
5 years ago

Hi Rashida Rahman

Many thanks. Problem now solved. :-)

br, Robert

Rashida Rahman Staff
5 years ago

Glad to know that it helps:)

You are always welcome!

Log in to reply.