I would need to know if I can manage the "loading icon" in css. I don't use the spin effect but I would like to load an animated svg (I hope it's possible) and I would like to know if I can, via css, increase the size of the loading icon or the div that contains it and also increase the display seconds which if I'm not mistaken are two by default. I hope my request is clear. Greetings and see you soon Eugenio
I am afraid there is no such option to play an animated SVG with a Custom Delay at the moment. However we can help write up the custom CSS to increase the Loading Image.
Please provide your website url and add in the Image for the Page Transitions.
Attached is the image to upload. The page is a test page that I use for my work so you will not see anything except a link in the off canvas menu. It is not visible to search engines. Attached is the svg file that I uploaded. Thanks a lot and see you soon Eugenio
I forgot... I would like the display time to be more or less as long as the animation time (6 seconds). In any case, if you create a css rule, I can manage it later
Yes, you can increase the size of your custom loading SVG icon using CSS. For your site, use the following rule:
#ajax-loading-screen.loader,
#ajax-loading-screenimg {
width: 100px!important; /* Adjust this one to your preferred size */height: 100px!important; /* Adjust this one too to your preferred size */
}
This will enlarge the loading icon on your site.
To extend the display time to match your animation (6 seconds), Salient does not offer a built-in option. You would need to use a custom JavaScript script to force the loader to remain visible for a set duration.
Good morning!
I would need to know if I can manage the "loading icon" in css. I don't use the spin effect but I would like to load an animated svg (I hope it's possible) and I would like to know if I can, via css, increase the size of the loading icon or the div that contains it and also increase the display seconds which if I'm not mistaken are two by default.
I hope my request is clear.
Greetings and see you soon
Eugenio
Hi Eugen,
Thank you for getting in touch.
You can edit this in the Salient > Page Transitions.settings.
Click on Image to View Larger
Try that and let us know how it goes.
Cheers,
Thanks Andrea for your reply. Actually I already knew this. My question is if I can increase the size and display time of the "loading icon" via css
Hey Again,
Thanks for your patience with this.
I am afraid there is no such option to play an animated SVG with a Custom Delay at the moment. However we can help write up the custom CSS to increase the Loading Image.
Please provide your website url and add in the Image for the Page Transitions.
Best,
ThemeNectar Support Team
Hi!
Thanks for your reply.
Below is the link to the page to which I want to apply the upload icon:
https://test.eugenionotaro.it/
Attached is the image to upload. The page is a test page that I use for my work so you will not see anything except a link in the off canvas menu. It is not visible to search engines.
Attached is the svg file that I uploaded.
Thanks a lot and see you soon
Eugenio
Attached files: loading icon animata-loop.svg
I forgot... I would like the display time to be more or less as long as the animation time (6 seconds). In any case, if you create a css rule, I can manage it later
Hi Eugenio,
Yes, you can increase the size of your custom loading SVG icon using CSS. For your site, use the following rule:
#ajax-loading-screen .loader, #ajax-loading-screen img { width: 100px !important; /* Adjust this one to your preferred size */ height: 100px !important; /* Adjust this one too to your preferred size */ }This will enlarge the loading icon on your site.
To extend the display time to match your animation (6 seconds), Salient does not offer a built-in option. You would need to use a custom JavaScript script to force the loader to remain visible for a set duration.
Give it a try and let me know how it goes.
Thanks,
Hi Noah!
Can you tell me which javascript file in Salient handles the display time, please?
Hey Again,
Thanks for reaching out! .
You can find the relevant js code in "salient/js/src/init.js" .
Let me know if you have any further questions.
Best,
ThemeNectar Support Team
Wow! 23000 strings of code...
I solved it in another way, applying code in the function.php file.
If you want I'll share it in this chat...
See you soon
Sure, let us know .
Thanks
ThemeNectar Support Team