How to Customize Page Preloader in Multi WordPress Theme?

June 23, 2021 Multi User Customize Multi, Multi Theme and Website Builder

You can enable or disable the page preloader in Appearance > Customize > Preloader. Here you will find many options to customize it as well:

  • Show preloader while pages (re)load – choose whether to show the preloader while pages load and reload.
  • Show preloader only while page loads (don’t show on page unload) – choose whether to show the preloader only while page loads, and not on page unload.
  • Preloader showing and hiding animation – choose the preloader page showing and hiding animation. Choose from:
    • Background fade
    • Background grow from left
    • Background grow from left 2
    • Background grow from left and right
    • Background grow from middle
    • Background grow grom middle circle
    • Background grow from middle circle 2
    • Background grow from top
    • Background grow from bottom
    • Background grow from bottom 2
    • Background grow from top and bottom
    • None
  • Background color – choose the preloader background color.
  • Spinner type – choose the preloader spinner type. Choose from Spinner, Image/video, Lottie, or None.
  • Spinner – choose the preloader spinner style from styles 1 to 5.
  • Spinner color – choose the preloader spinner color.
  • Preloader media – this option works if the spinner type is set to Image/video. Add media file to display as your page preloader. Use a .png or .gif file.
  • Media width – set the preloader media width. Use pixels.
  • Media height – set the preloader media height. Use pixels.
  • Lottie file – this option works if the spinner type is set to Lottie. Add lottie file to display as your page preloader.
  • Lottie file URL – this option works if no file is chosen in the field above. Add lottie file URL to display it as your page preloader.
  • Lottie play mode – set the lottie play mode to Normal or Bounce.
  • Lottie animation speed – set the lottie animation speed. 1 is the default speed. Values above 1 will make the animation faster, values between 1 and 0 will make the animation slower.
  • Lottie width – set the lottie width using any CSS-compatible width value.
  • Lottie height – set the lottie height using any CSS-compatible height value.