Use custom icon for preloader animated icon


#1

Hello to Jupiter community,

I would like to substitute animated icon in preloader with custom animated icon (png with css movement). Could anyone help me where is the code for animated preloader icon hidden? What code should I edit? Thanks!

Lukas


#2

Hello,

There is no option to upload your own pre-loader icon, but you can change it using css code.
Add this code in Theme Options > Advanced > Custom CSS:

.mk-body-loader-overlay.page-preloader{
background: url(http://link_to_your_image) center center no-repeat;
background-size: cover;
}

Replace the link with your image URL.

Best regards,
Artbees Support.


#3

Thank you Tatyana,

had to do some other changes. Hide default animation icon. Move loader logo uAnd make backgroud image not to cover whole page but be in a native width and height.

.mk-body-loader-overlay.page-preloader{
background: url(http://link_to_your_image) center center no-repeat;
background-size: auto;
}
.preloader-logo {
	top: 30%;
}
.ball-pulse-sync {
	display: none;
}

#4

Hello,

Glad you managed to resolve this issue.

Best regards,
Artbees Support.


#5

Thanks for the CSS. One thing to note, is that .ball-pulse-sync will only impact 1/10 of the pre-made loaders included with jupiter. For instance I had to use the selector .ball-scale-multiple based on the preloader I had selected in theme options. Just incase anyone tried using it and it didn’t work for you.

Also, while trying to achieve a custom animated preloader with Jupiter, I found this great online tool for making your own custom loader icon https://loading.io/animation/icon/ . they let you upload your own icon/logo and they can generate a .gif which you can then upload in the theme options as the preloader logo.

Hope this helps others looking for a custom preloader animation in Jupiter theme.