Loader

Inline and overlay spinner for indicating asynchronous activity. Text and an animated ellipsis can be added optionally. Default: no text, md size, inline mode.

Basic (spinner only)

By default no text is shown — just the spinner.

$m->loader('demo-loader-basic')

// No JS API needed for a static loader

With text

Use ->text() to show a label beside the spinner.

Fetching data

Please wait

$m->loader('my-loader')->text('Loading')
$m->loader('my-loader-sm')->text('Fetching data')->size('sm')
$m->loader('my-loader-lg')->text('Please wait')->size('lg')

// No JS API needed for a static loader

Animated ellipsis

Call ->animateDots() to append a staggered three-dot animation after the text. Requires ->text() to be set.

Decrypting Messages

Uploading

$m->loader('my-loader')->text('Loading')->animateDots()
$m->loader('decrypt-loader')->text('Decrypting Messages')->animateDots()
$m->loader('upload-loader')->text('Uploading')->animateDots()->size('lg')

// No JS API needed for a static loader

Overlay mode

Use ->overlay() on a position:relative parent to show the loader centred over a content area. The parent must have position: relative. Click the button to toggle.

Content area — the overlay covers this.

// Parent must be position:relative
$m->loader('my-overlay')->text('Loading')->animateDots()->overlay()->hidden()

var loader = document.getElementById('my-overlay');
// Show
loader.classList.remove('m-hidden');
// Hide
loader.classList.add('m-hidden');

Show / hide via JavaScript

Toggle the m-hidden class to show or hide a loader at any time.

Working

Loader is hidden.

$m->loader('my-loader')->text('Working')->animateDots()->hidden()

var loader = document.getElementById('my-loader');

// Show
loader.classList.remove('m-hidden');

// Hide
loader.classList.add('m-hidden');

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->loader($id)`	`string`	Create a loader instance. No text or animation by default.
`->text($str)`	`string`	Label displayed beside the spinner. Default: `''` (none).
`->animateDots($bool)`	`bool`	Append an animated three-dot ellipsis after the text. Default: `false`.
`->size($size)`	`string`	Spinner size: `sm`, `md` (default), `lg`.
`->overlay($bool)`	`bool`	Cover a `position:relative` parent. Default: `false` (inline).
`->hidden($bool)`	`bool`	Start hidden (`m-hidden` class). Default: `false`.