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

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>