Creating a Custom Loader

Article author
Josh Lopez
  • Updated

You can replace the default Memberstack loader animation with your own custom loader or loading content using the data-ms-loader attribute.

How to Add a Custom Loader

  1. Add a div with the data-ms-loader attribute anywhere on your page. This will be your custom loader element.
  2. Hide your custom loader div initially by setting display: none;
  3. Inside the div, add your custom loader content - this can be text, images, animations, etc.
  4. Memberstack will show this div instead of the default loader when opening modals.


 <div data-ms-loader style="display: none"> <img src="loader.gif"> </div> 


  • Use a gif or video for an animated loader.
  • Make sure your loader contrasts well against the background.
  • Add descriptive text or your brand logo to the loader.
  • Test on mobile to make sure it looks good on all devices.

Custom loaders allow you to match the loading experience with your brand. Just add any content inside a div with data-ms-loader to customize.

Was this article helpful?



Please sign in to leave a comment.