Sadrazam – Spinner & Progress Bar

Removed: Main, Helper & Block Spinners

Sadrazam.Spinner JS module and .spinner--main, .spinner--helper, .spinner--block CSS classes have been removed.

AJAX loading feedback now uses two mechanisms:

Button bttn--loading shimmer on the clicked button. Enabled via Ajax.send({ button }).

Progress Bar ProgressBar — thin top bar. Enabled via Ajax.send({ spinner: true }) when no button is provided.

Button Scope data-scope attribute disables sibling buttons in the same scope during a request.

See Ajax documentation for details.

Progress Bar (Top Loading Bar)

YouTube/GitHub-style trickle progress bar at the top of the page. Used automatically by Ajax.send({ spinner: true }) when no button is provided. Can also be called directly.

Controls

Ref Count 0

Simulate

Reference counting ensures the bar stays visible until all concurrent requests complete. Trickle animation: fast start (5%/200ms), slows after 80% (0.3%/200ms), stops at 95% waiting for done().

Inline Spinner (CSS-only)

Sits alongside text or inside buttons. Inherits the current font size via 1em sizing. Applied via .spinner--inline. No JS required.

With Text

Loading data

.spinner--inline

In Button

Font Size Small Normal Large

The inline spinner scales with font-size since it uses 1em for width and height.

API Reference

Static API for Sadrazam.ProgressBar

start() Shows the bar and starts trickle animation. Increments reference counter.

Sadrazam.ProgressBar.start()

done() Decrements reference counter. Completes to 100% and fades out when counter reaches 0.

Sadrazam.ProgressBar.done()

set(n) Sets progress manually. Takes a 0-1 value (e.g. 0.5 = 50%).

Sadrazam.ProgressBar.set(0.5)

help() Prints available methods to the browser console.

Sadrazam.ProgressBar.help()