Preloader Atom

  • JoomLeadTeam
  • 2 November 2016
  • No comments
  • Docs
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.
topbar.min.js The topbar js library.

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


Note Starting from 2.2.4, preloader added new topbar animation that helps you create a beautiful Site-wide progress indicator.

Setting Description
Preloader type Select the preloader type animation
Section ID Enter your unique Section id for creating topbar progress indicator
Bar thickness The progress bar thickness.
Shadow Color Customize the topbar shadow Color.
Bar Red/Orange/Yeallow/Green/Blue Customize the topbar gradient color stops used to draw the progress bar. See Customizing Gradients

Preloader animation

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)


Leave a Reply

You must be logged in to post a comment.

JoomLead Gantry5 Particles 2.2.12 released, new features, Joomla 5 support, bug fixes and more Learn more
Flash Sale. Get Up to 25% Off - Coupon: FLASH25 Shop Now