Loading Spinner

This feature allows you to replace the default loading spinner in the builder with a custom one, either using an animated image or an HTML/CSS-based loader. This gives you flexibility to match the builder’s loading animation with your application’s branding or user interface design.

Animated Image

You can replace the default loader with a custom animated image (such as a GIF or PNG). This is useful if you have a branded or pre-designed loading spinner image.

unlayer.init({
  appearance: {
    loader: {
      url: 'https://example.com/loader.gif'  // URL of the custom loading spinner image
    }
  }
});

In this example, the loading spinner will display the image from the provided URL whenever the builder is loading.

CSS Loader

If you prefer to create a fully customized loader using HTML and CSS, you can provide the structure and styling for the loader directly in the configuration. This approach gives you full control over the design and animations of the loading spinner.

unlayer.init({
  appearance: {
    loader: {
      html: '<div class="custom-spinner"></div>',  // HTML structure for the loader
      css: '.custom-spinner { color: red; }'       // CSS styling for the loader
    }
  }
});

In this example, the custom loader will display a red spinner as defined by the HTML and CSS. You can create complex loaders using animations or any design that fits your needs.

Best Practices

• Branding: Use a custom loader that aligns with your brand’s identity. Whether using an animated image or custom HTML/CSS, ensure that the design is consistent with your application’s overall look and feel.
• Performance: When using an animated image, ensure that the file size is optimized to avoid slow loading times. For HTML/CSS loaders, avoid overly complex animations that could impact performance.
• Testing Across Devices: If you are using a CSS loader, test the design across different devices and screen sizes to ensure it behaves and renders correctly, especially on mobile and tablets.