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