Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 14, 2022 at 10:04 am #1340451
    Jak73

    Hi,
    i would like to use my own preloader icon. How can i do that?
    or, how can i change the color from the existing preloader from black to pink?

    Kind regards Jak

    • This topic was modified 2 years, 9 months ago by Jak73.
    February 14, 2022 at 11:58 am #1340462
    Guenni007

    you don’t mean the logo that you can set in enfold options – but you mean that spinning wheel!
    this is just a keyframe animation with rotate settings 

    @-webkit-keyframes av-load8 {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes av-load8 {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% {-webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

    and this is the rule for the siteloader:

    .av-siteloader , #top div.avia-popup .mfp-preloader{
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  margin:0 auto;
  border-top: 	2px solid rgba(0, 0, 0, 0.2);
  border-right: 2px solid rgba(0, 0, 0, 0.2);
  border-bottom:2px solid rgba(0, 0, 0, 0.2);
  border-left:  2px solid #000;
  -webkit-animation: av-load8 0.8s infinite linear;
  animation: av-load8  0.8s infinite linear;
}

    maybe you can change the borders to none – and insert an icon as content.

    February 14, 2022 at 12:02 pm #1340463
    Jak73

    Hi Guenni,

    you are right. I mean the spinning wheel.

    kind regards jak

    February 14, 2022 at 12:02 pm #1340464
    Jak73

    Is it possible to upload another?

    February 14, 2022 at 12:34 pm #1340470
    Guenni007

    these are borders with one border at opacity: 1

    but you can try something like this:

    .av-siteloader {
	border: none !important;
	content: url(/wp-content/uploads/alternative-image.png);   /***  might be a svg file too ***/
	width: 150px;
	height: 150px;
}

    btw. this is background-color definition:

    #top .av-siteloader-wrap {
  background-color: #000;
}
    February 14, 2022 at 1:12 pm #1340482
    Jak73

    Hi Guenni,
    isn’t it just possible to load an animated gif into it? What is the svg format please?

    kind regards Jak

    February 14, 2022 at 1:51 pm #1340491
    Guenni007

    if you have an animated gif there – you can remove the animation instruction from av-siteloader

    .av-siteloader {
	border: none !important;
        animation : none !important;
	content: url(/wp-content/uploads/animated.gif); 
	width: 100px;
	height: 100px;
}

    PS: SVG = Scalable Vector Graphics

    February 14, 2022 at 4:55 pm #1340535
    Jak73

    Hi Guenni,

    where should i remove the animation instruction. Would do i need to remove?

    kind regards Jak

    February 15, 2022 at 1:35 pm #1340694
    Ismael

    Hi,

    You have to use the css code that @Guenni007 provided above to disable the animation of the site preloader.

    // https://kriesi.at/support/topic/how-to-change-the-preloader-icon/#post-1340491

    Best regards,
    Ismael

    February 15, 2022 at 4:39 pm #1340744
    Guenni007

    Yes this line in the code is for removing: animation : none !important;
    otherwise your animated gif will rotate
    see here an animated gif ( without that animation : rotation of default enfold preloader) : https://webers-testseite.de/

    February 15, 2022 at 7:01 pm #1340771
    Yigit

    Hi,

    Thanks for your help @Guenni007 :)

    Best regards,
    Yigit

    February 15, 2022 at 9:57 pm #1340793
    Jak73

    I will try this, thanks a lot Guenni!

    kind regards Jak

    February 15, 2022 at 10:14 pm #1340797
    Guenni007

    I think my provider is working on my servers right now. All my pages are extremely slow at the moment. – Sorry

    February 16, 2022 at 11:32 pm #1340999
    Jak73
    This reply has been marked as private.
  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘How to change the preloader icon’ is closed to new replies.