Components / Motion

Loaders

Animated indicators for work in progress, in five styles.

Functions: cui_loader

Usage

cui_loader(ui, .style = CUI_LOADER_DOTS);    /* also BARS, PULSE, ORBIT, GRID */
cui_loader(ui, .style = CUI_LOADER_PULSE, .size = 32, .color = CUI_COLOR_ACCENT);

A loader returns nothing, takes no id and keeps no state: it draws for as long as you call it, so call it only while the work is running. The five styles are CUI_LOADER_DOTS (the default), CUI_LOADER_BARS, CUI_LOADER_PULSE, CUI_LOADER_ORBIT and CUI_LOADER_GRID. size is the width in points and defaults to 24; every style is square except the dots, which are half as tall. color defaults to the secondary text color. While a loader is on screen the window redraws every frame, so an idle app does not sleep until it is gone. A loader says that something is happening, not how much is done: use cui_progress when you know the fraction, and cui_spinner for the plain ring.

Options of cui_loader

Option	Type	Default	Description
.style	cui_loader_style		One of CUI_LOADER_DOTS, CUI_LOADER_BARS, CUI_LOADER_PULSE, CUI_LOADER_ORBIT or CUI_LOADER_GRID.
.size	float		Size in points; 0 uses the component's own.
.color	cui_color		A theme color such as CUI_COLOR_ACCENT, or CUI_RGB(0x7747ff); unset uses the theme's.

Related

• Progress, meter, spinner and skeleton: Ways to show waiting and amounts: a progress bar, a meter against a limit, a spinner, a gauge and placeholder shapes for content that is loading.
• Dock: A row of icons that grow under the pointer, as in a desktop dock.
• Gradient text and spotlight cards: Text filled with a gradient, and a card with a glow that follows the pointer.
• Control tiles: Large toggle tiles for quick settings such as Wi-Fi or Do not disturb.