LoftLoader jQuery – Create a Stunning Loading Screen

Here is an example of a complete settings configuration for LoftLoader jQuery:

LoftLoader Settings

You can customize the appearance and behavior of LoftLoader by using the following settings.

loftloader: {
  // Container where LoftLoader will be inserted
  container: '.loftloader-container',

  // Background color of the loading screen
  backgroundColor: '#f9f9f9',

  // Color of the loader animation
  color: '#333',

  // Size of the loading screen
  width: 300,
  height: 300,

  // Animation speed (ms)
  speed: 500,

  // Display message
  displayMessage: true,

  // Message text
  message: 'Loading...',

  // Font family and size
  fontFamily: 'Arial',
  fontSize: 24,

  // Display progress percentage
  displayProgress: true,

  // Show close button
  showCloseButton: true,

  // Close button text
  closeButton: 'Close',
}

Background Image

You can also set a background image for the loading screen.

loftloader: {
  //...
  backgroundImage: 'url(images/loading-background.png)',
},

Loading Icon

You can choose from several built-in loading icons or use your own.

loftloader: {
  //...
  loadingIcon: 'circles',
  // loadingIcon: 'dual-ring',
  // loadingIcon: 'cogs',
  // loadingIcon: 'ball-rotate',
  // loadingIcon: 'triangle-spin',
},

Loading Animation

You can also customize the loading animation.

loftloader: {
  //...
  animation: 'pulse',
  // animation: 'rotate',
  // animation: 'swirl',
  // animation: 'wave',
},

Events

You can also use custom events to trigger LoftLoader.

loftloader: {
  //...
  events: {
    start: function() {
      console.log('Loading started');
    },
    end: function() {
      console.log('Loading ended');
    },
  },
},

Here are the features of LoftLoader jQuery:

1. New feature - Background Image - Repeating Pattern: Enables a repeating pattern as a background image.
2. New feature - Full Background Image: Allows for a full background image.
3. Gradient background color: Offers gradient background color options.
4. Static custom image without any animation: Enables displaying a custom static image as a loader.
5. Easy to use: LoftLoader jQuery is easy to use and requires no complex code.
6. Unlimited colors: Offers unlimited colors to fit your brand.
7. Stay sharp, high quality, and super fast: Built with pure CSS3 animations for smooth performance.
8. Supports different types of background: Supports solid color, gradient color, full background image, and repeatable pattern backgrounds.
9. Animation to custom images: Can add animation to custom images, such as loading, rotating, bouncing, and rolling.
10. Beautiful on any devices: Compatible with desktop and mobile devices, working perfectly on modern browsers.
11. Flexible and controllable: Can choose from various loader animation, progress bar, and counting percentage options.
12. Device control: Enables hiding or showing the loading screen on specific devices, such as mobile or all devices.
13. Lightweight and modern: Built with HTML5 and CSS3, with SCSS files included.
14. Detailed documentation: Includes very detailed and clear documentation.
15. Lifetime free updates: Guarantees lifetime free updates.
16. Various ending animations: Offers Split Diagonally - Vertically, Split Diagonally - Horizontally, and more ending animations.
17. New loader animation: Offers Incomplete Ring, and more loader animations.
18. Custom image loading vertically: Enables the preloader to load an image vertically.
19. Custom image rotating: Offers the option to rotate custom images.
20. Control over custom loader image max width: Enables adjusting the max width of custom loader images for responsive design.

Note that some features listed are not available in the jQuery version, such as Random Messages, which is exclusive to the WordPress version.