🌀 Spinner
The Spinner widget is an animated circular indicator used to show that a background process is active. It provides essential visual feedback during data fetching, system boot-up, or hardware communication, letting the user know the application has not frozen.
⚙️ Properties (Props)
The Spinner configuration is defined by the SpinnerWidget interface. It manages the geometry and speed of the rotation animation.
| Property | Type | Description |
|---|---|---|
| Arc Length | number | The visible "sweep" of the spinner in degrees (e.g., 60° to 270°). |
| Spin Time | number | The duration in milliseconds for one full 360° rotation. |
| Color | string | The HEX color of the spinning arc. |
| Thickness | number | The pixel width of the arc line. |
🛠 Animation Physics
The Spinner is hardware-accelerated and runs independently of the main UI thread in most Artok configurations:
- Indeterminate Loading: Use a shorter Arc Length (e.g., 90°) for a classic "searching" look.
- Rotation Speed: A Spin Time of
1000(1 second) is standard. Lower values create a "high-performance" feel, while higher values (2000+) feel calmer. - Direction: The animation defaults to clockwise rotation.
🎨 Styling
In the Inspector Panel, you can adjust the look to match your brand:
- Arc Color: Set the primary color of the moving segment.
- Background Arc: You can enable a faint, 360° background circle to show the full path of the spinner.
- Rounded Caps: Enable this to give the ends of the spinning arc a soft, professional finish.
⚡ Runtime API (Lua)
The Spinner is typically shown or hidden based on the status of a Logic and Events task.
-- Show the spinner when starting a WiFi scan
function start_scan()
spinner_loading:set_hidden(false)
wifi:scan_networks()
end
-- Hide the spinner once data is received
function on_wifi_data_ready()
spinner_loading:set_hidden(true)
list_networks:update_data()
end
-- Dynamically change the color to indicate a warning state
if system_busy_too_long then
spinner_loading:set_style_arc_color(0xFFA500) -- Orange
end
Spinners use very little CPU as they rely on simple arc rendering. However, if your UI is under heavy load (e.g., loading a 4K image), the animation may stutter. For critical "Processing" states, ensure the spinner is placed on a Top Layer.
🚀 Next Steps
- Bar — Use a progress bar if you know exactly how long a task will take (Determinate loading).
- LED — A simpler "heartbeat" indicator for system health.
- Logic and Events — Learn how to trigger spinners during asynchronous Lua calls.