Canvas Support

Loader appearance

12 replies · opened Mar 16, 2023

CcadilhacMar 16, 2023

Hi,

Playing with the page transitions. I have added correct attributes to the body tag as your example does.
However, the animation is quite not correct.

  1. The page is first completely blank during some delay, then the loader icon appears but only when the "out" transition starts to fade out. Checking your own web site, I can see that the loading icon is visible right at the beginning while the site loads, which is not what I am seeing on my dev machine.

  2. I can make the color of the loading icon change. I can also change the out animation type. But changes on the other parameters have no effect, like the in animation type (the page always load blank as the start of the animation) or the in and out speeds.

Thanks

Nicolas

SSemicolon WebSTAFFMar 17, 2023

Hello,

Apologies for the Inconveniences caused!

Can you please provide us with a Live URL or the sample code of the `` Tag, so that we can check out the exact issue and provide you with more accurate assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

CcadilhacMar 17, 2023

There is no live website yet. Here is the body:

``

Nicolas

SSemicolon WebSTAFFMar 17, 2023

Hello,

Thanks for your Patience!

We have identified the issues with this. Since we re using an in-house solution for this and not any plugin, the data-animation-out and the data-speed-out Attributes will not work and will be retired since they is not required and does not provide any functional or UI/UX value. The data-animation-in and the data-speed-in will work normally.

Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

CcadilhacMar 17, 2023

I understand for the retired params. But, as I said, the speed-in has no effect here.
And nothing about the timing issue where the loading icon appears too late?

SSemicolon WebSTAFFMar 18, 2023

Hello,

The data-speed-in issue has been resolved. Regarding the timing issue with the Page Transition appearing, we couldn't experience this issue. It can be possible that the Page is being loaded fast, so the Loading Icons appears while the Page is almost being displayed. This is necessarily not an issue as the Page Transition functionality follows the default behavior of Page Loading and document.readyState Event, so we do not have a control on this. It could be possible, that since everything is now async in Canvas, the time taken to fetch the module file, in this case PageTransition, the delay is evidently visible. In this case, you can consider using the following code directly after the `` tag:
[ch_pre]<div class="page-transition-wrap">
<div class="css3-spinner" style="--cnvs-loader-color:#f00;">
<div class="css3-spinner-scale-ripple">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>[/ch_pre]

This will display the Loader instantly.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

CcadilhacMar 18, 2023

I will try to reproduce the issue with your new version and when the site is online so that you can see.
What is the default value for data-speed-in when not specified?

SSemicolon WebSTAFFMar 18, 2023

Hello,

The default value is 1000ms. Yes, please consider checking this with the New Version as the issue should have been resolved. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

CcadilhacMar 20, 2023

The loading icon now appears normally. This one is fixed.
Note however that in and out speeds have no effect at all when I change them.

SSemicolon WebSTAFFMar 20, 2023

Hello,

Glad the issue was resolved.

As we have mentioned in our previous replies the -out feature has been retired. The -in Feature has been tested and fixed before the last update and works perfectly fine for us. Please provide us with a Live URL so that we can check out the exact issue and provide you with more accurate assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

CcadilhacMar 20, 2023

I realize that this issue is related to the other one I posted here about the javascript files not loaded when using an absolute path.
So I will revisit there once the other issue is fixed.

CcadilhacMar 20, 2023

Now that I have a workaround for the other issue (i.e. all javascript files now load) I can see that the in parameters are effective and work well (mainly... because if I try a fadeInLeft effect for instance, it kind of jumps at the end... but anyway I will simply use a fadeIn).

SSemicolon WebSTAFFMar 21, 2023

Hello,

Thanks for reporting this!

Consider replacing the existing Files with the ones attached to this reply.

This should definitely fix the issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard