You can create your own custom loader element with the attribute data-ms-loader, it will replace the default loader.
Create a Customer Loader
This can be anything you like. I recommend a fixed element so that it always appears on the screen.
Add the MS Attribute
- Wrap your loader in a div and give it a classname.
- Select the new outermost div and add the attribute
data-ms-loaderordata-ms-loader="true". - Set the outermost div to Display: none.
- Publish your site and start testing. You may need to throttle your internet speeds to see it appear.
This works with checkout, updating plans, signup, login, profile form, and basically* every other Memberstack event.
* The only time Memberstack cannot use your custom loader is with the native profile modal. It works just fine with custom profile forms.
Tips
- 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.
Comments
2 comments
So how do you implement it?
Hey Nicholas Platt 👋 Thank you for posting. Turns out I didn’t upload the complete article before. It's updated now ☝️
Please sign in to leave a comment.