Mandala Ripple Loader: a rangoli loading animation

When to use the Mandala Ripple Loader

Use it for a calm full-screen wait. The rings pulse outward slowly, and the pattern contains no festival symbols, so this mandala animation also works outside Diwali. It is made of thin lines, so it looks best at medium and large sizes.

Add the Mandala Ripple Loader to React or Next.js

1. Pick a component. Open it in ExodeUI to change its text and colours, or keep it as it is.
2. Download the .bexode file and put it in your public folder.
3. Install the runtime with npm i exodeui.
4. Render it with ExodeUICanvas. Taps and hovers work out of the box, and fireTrigger plays it from your code.

import { ExodeUICanvas, useExodeUI } from 'exodeui';

export function MandalaRippleLoader() {
  const { setEngine, fireTrigger } = useExodeUI();

  return (
    <>
      <div style={{ width: 400, height: 300 }}>
        <ExodeUICanvas
          src="/ui-gallery/files/mandala-ripple-loader.bexode"
          autoPlay
          onReady={setEngine}
          style={{ width: '100%', height: '100%' }}
        />
      </div>
      {/* Optional: taps on the canvas already work */}
      <button onClick={() => fireTrigger('in_whirl')}>Play from code</button>
    </>
  );
}

More Diwali UI components

• Rangoli Loading Spinner
• Kolam Line Loader
• Lotus Bloom Loader
• Triple Ring Loader
• Colour Fill Loader
• Eight-Point Star Loader

Frequently asked questions

Is the Mandala Ripple Loader free to use?

Yes. Try it here, open it in ExodeUI on the free Community plan or download the .exode file.

What does the Mandala Ripple Loader do?

Scalloped rings pulse outward from the centre while the pattern turns. It loops by itself. Tap the rangoli to spin it.

How do I stop it when my content is ready?

Render it while your data loads and remove it from the page when the data arrives. The animation loops until you do.

Can I restyle the Mandala Ripple Loader for my brand?

Yes. Open it in ExodeUI and every colour, label, shape and timing can be edited. Any names and prices in it are sample content.

Can my code control it?

Yes. Fire its trigger (in_whirl) with fireTrigger from useExodeUI. Your own code still handles what the action does, such as saving the choice.

More from ExodeUI