Skip to main content
Version: v2.4.0 (Current)

🌀 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.

PropertyTypeDescription
Arc LengthnumberThe visible "sweep" of the spinner in degrees (e.g., 60° to 270°).
Spin TimenumberThe duration in milliseconds for one full 360° rotation.
ColorstringThe HEX color of the spinning arc.
ThicknessnumberThe 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

PERFORMANCE

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.