← Back to Documentation

Documentation

Component: Preloader Loading animation while the page is being prepared

The Preloader component shows an animation during page loading. It’s useful for pages with heavy media (lots of images), where you want to avoid a “jumping” layout and give users a clear loading state.

Download Animmaster Vite Template Save your time — start now

What is a preloader?

A preloader is a UI layer that appears before the page is fully ready. It can help you: show a consistent loading state, reduce perceived waiting time, and avoid showing unfinished layout while assets are loading.

Best use case
Use a preloader on landing pages, portfolios, galleries, and any page with many images or heavy content. For simple pages, it’s better to keep things instant.

Component location

Files are located in src/components/effects/preloader. Inside you’ll find:

  • JS file with preloader logic.
  • An HTML file that is auto-included into <head>.
  • SCSS file for styling the preloader animation.

Enable the preloader

On pages where you need the preloader, pass settings to the page template via locals. The component is controlled by two options: enable and once.

Template locals — preloader settings
...
"preloader": {
	"enable": "true",
	"once": "false"
},
...
  • preloader.enable — turns the component on/off for the page.
  • preloader.once — if true, shows the preloader only once (first visit / first load).
Note
Values are passed as strings ("true"/"false") because they come from HTML template locals.

Typical setups

Always show

Use this for pages that load a lot of media and should always show a loading state.

Always show
"preloader": { "enable": "true", "once": "false" }

Show once

Good for brand/intro preloaders: show only on the first load, then keep navigation fast.

Show once
"preloader": { "enable": "true", "once": "true" }

Download

Add a clean loading experience to media-heavy pages. Download the template and ship faster with ready-to-use components.

Download Animmaster Vite Template Save your time — start now