Preloader Atom
Create a simple preloader on the screen while the rest of the page’s content is still loading. See how Preloader can be designed beautifully on Demo Page.
# Preloader Package contents
Files | Description |
---|---|
jlpreloader.yaml | Contains the Preloader particle settings. |
jlpreloader.html.twig | The Twig file to pull information, settings. |
Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.
Requirements Preloader atom requires Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.
After you upload and implement this atom, go to your Template/Theme Settings > select the Layout to add Preloader (i.e: Home) -> Page Settings -> Enable the Preloader Atom
Settings
Note By default, preloader atom using Spinner to create an animated loading spinner, however, you can add new gif image to create different loading effect.
Setting | Description |
---|---|
Preloader Image | Select desired image for preloader icon, default using Spinner icon from Uikit. |
Width | Enter the image’s width. |
Height | Enter the image’s height. |
Background Color | Customize the background color for body on load. |
FadeOut | Changing the visibility of elements on the page with a fading effect. |
Color | Customize the color for icon on load.(Use this option for spinner icon only) |
Comments