Preloader

Build preloaders visually in Oxygen for hiding flashes of unstyled content (FOUC) as the content loads, hiding fallback fonts as webfonts.js become active or for displaying anything you like for a few seconds when a visitor first arrives on the site.

A short video showing some of the default presets being styled

Option Controls

Type of Pre-Loader

Presets – 10 included CSS based preloader animations.
Image – Add your own image from your media library.
Custom – add any Oxygen elements inside the preloader to build your own.

Size, Animation Durations

The preloader presets can be styled by changing the color, size & also the animation durations to speed up or slow down the animations. Some of the CSS loaders have inner animations with their own speed settings.

Visibility in Builder

This setting offers a quick way to hide the preloader while you’re working inside the builder. This has no effect on the front end.

Config

Remove Preloader only after

All page content has loaded – Preloader will wait until all the images, videos, scripts, CSS etc have finished loading before making the page visible. (window.onload)

After x seconds – Preloader will only be visible for the number of seconds set.

After all web fonts are active – If using webfonts.js for google fonts or adobe fonts, the preloader will wait until all the fonts are active (when the HTML has the wf-active class) before making the page visible.

Page Fading Effect

The preloader can also be used to give your site a nice fade in effect by setting the preloader to custom, but adding in no elements, just the white background. Then set the overall transition by going to Advanced > Effect > Transitions and setting the transition to around 1s. The result will be that the page appears to fade in nicely as the user browses the site.

Avoiding Jankiness

To avoid the preset animations being slightly janky on some iphones, it’s best not to add any background colours to the outer div of the component itself. Instead, stick to using the background colour control found in the Primary settings. It’s a bizarre quirk.

Preloading Sections Only

You may want to just hide one part of your site on loading, say a slider that doesn’t look great when it first loads. To do this you can go to the section > advanced > layout and set the positioning to relative. Then put the preloader component inside the section and give it a absolute positioning. It will automatically then take up the entire width and height of that individual section.

Other CSS loaders

There is no lack of preloaders around. I found some more cool CSS loaders/spinners at https://epic-spinners.epicmax.co/. You can copy the html into a code block inside the preloader set to manual. Be sure to add the provided CSS to a stylesheet, not the code block, to make sure that the CSS is stored in your global stylesheet and not in the footer.