How do I remove grey shrinking circle before preloader spinner? - Support

Tagged: circle, grey, preloader, spinner

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
February 17, 2016 at 8:42 pm #584934
DigitalEssence
Participant
Hi,

As per this thread: https://kriesi.at/support/topic/remove-white-circle-animation-before-preloader-animation/

I’m seeing a grey shrinking circle on top of the spinning preloader. It only appears if I move between pages but not if I refresh a page.

I’ve created a video to illustrate what I mean: http://screencast.com/t/yl1OcMpaD

The site is at: http://digitalessence.net

And I’ve added this custom code to change the preloader but the circle was present before.
```
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
001 Preloader
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#top .av-siteloader-wrap {background-color: #F26722;}
#top .av-siteloader {border-left-color: #ffffff!important;}
```
Many thanks as always for your help.

Hedley Phillips
February 18, 2016 at 3:07 am #585101

Yigit
Keymaster

Hi DigitalEssence!

Which browser and OS are you using? I checked your website on Safari, Chrome and Firefox on OS X 10.11 and could not reproduce it :/

Cheers!
Yigit

February 18, 2016 at 12:03 pm #585320

DigitalEssence
Participant

Hi Yigit,

I’m using Chrome, IE & Firefox on both Win 7 Pro 64bit and Windows Server 2008 R2

And also Safari on the iPad.

The 2008 machine is not on my network and is being accessed via remote desktop software so that rules out my router/network or anything else I can think of causing this.

I’ve also tested this over 4G on my iPhone and am seeing the same issue. (only did this as we once saw O2 data mangling some of our scripts and we had to move to https to stop the problem. Same thing happened to Transport For London but O2 listened to them but not too us. Funny that).

Anyway, if I can provide any more test info please say. Suffice to say I can see this on all devices on all networks and all browsers.

thanks,

Hedley

February 18, 2016 at 12:19 pm #585328

Yigit
Keymaster

Hey!

I asked my teammates to check your website on Windows. Please kindly wait to hear from them.

Regards,
Yigit

February 18, 2016 at 5:28 pm #585520

Vinay
Inactive Moderator

Hey!

We see the big white semi transparent circle (just before the preload spinner appear) that scales down when you click on any nav links. Please create a temporary user with ‘administrator’ role and share in private content with permission to deactivate all plugins and add custom code if necessary to help you remove the preloader circle that scales down before the spinner.

Best regards,
Vinay Kashyap

February 18, 2016 at 7:02 pm #585591

DigitalEssence
Participant

Hi Vinnie,

I’m glad you can reproduce the issue. That’s great news.

I’ve already disabled all plugins and tested but you are welcome to do the same and whatever else is required to test/resolve.

I’ve put the user details in the Private area.

February 19, 2016 at 8:15 am #585899
Vinay
Inactive Moderator
Hey!

We have added the below css in Quick CSS please check the site now it looks good on my end.
```
/*Pre Loader fix*/
.av-preloader-reactive #top .av-siteloader-extra{
   display:none;
}
```
Regards,
Vinay Kashyap
February 19, 2016 at 4:17 pm #586145

DigitalEssence
Participant

Hi Vinnie,

thanks for looking into this for me.

I see that the shrinking grey circle has now gone but it’s introduced another issue.

As before, this is only visible when switching between pages as opposed to reloading a page. This time I see a smaller spinner which then jumps to the normal sized one.

I’ve created another video and slowed it down by 50% to illustrate: http://www.screencast.com/t/Xr3XyCBrBJIX

February 19, 2016 at 9:25 pm #586319
Vinay
Inactive Moderator
Hi!

To disable the small spinner please use the below code in Enfold > General Styling > Quick CSS
```
#top .av-siteloader {
    display: none!important;
}
```
Cheers!
Vinay Kashyap
February 22, 2016 at 5:30 pm #587314

DigitalEssence
Participant

Hi Vinnie,

sorry to take so long to reply.

I tried the code: #top .av-siteloader {display: none!important;} but this just disables the spinner completely.

I’m trying to stop the small spinner that I see before the larger spinner circle appears. The video I posted above shows what I mean.

Thanks,

Hedley

February 25, 2016 at 10:18 am #588847

Ismael
Moderator

Hi!

I checked the page and I don’t see the small spinner any more. Did you figure this out?

Cheers!
Ismael

May 3, 2016 at 11:28 pm #626805
bobfurgo
Participant
Hi Guys! I have the same question. I used the code that Vinnie provided earlier:
```
/*Pre Loader fix*/
.av-preloader-reactive #top .av-siteloader-extra{
   display:none;
}
```
which worked but now the spinner goes from small to large because I added extra padding:
```
.av-siteloader {
  padding: 50px !important;
}
```
Is there a way to make it so that it doesn’t transition from small to large? Additionally, what is the css class I can use to target the pre loader logo?
May 6, 2016 at 6:36 am #628119
Ismael
Moderator
Hi,

I checked the page again and I can now see the small spinner. I’m sorry about my previous response. Please add this code to remove the smaller spinner:
```
.av-siteloader-extra {
    display: none !important;
}
```
Best regards,
Ismael
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.