Spinner
Usage
Spinners indicate that an operation is in progress. They can be displayed inline or as an overlay that dims the background.
YAML Export
1. Copy the YAML from the component view.
2. Paste it into your Canvas app.
3. Bind the Visible property to control when the spinner appears.
Spinner Styles
- Circular: Rotating circle with partial stroke (most common)
- Dots: Three bouncing dots
- Bars: Four animated bars
Overlay Mode
When overlay mode is enabled:
- Spinner appears centered on a dimmed background
- Blocks interaction with underlying content
- Use for blocking operations (e.g., saving, loading data)
Examples
Basic Spinner
Spinner1:
As: icon
Icon: Icon.Loading
Width: 32
Height: 32
Color: RGBA(37, 99, 235, 1)
Visible: varIsLoading
Overlay Spinner (Advanced)
SpinnerOverlay:
As: container
Fill: RGBA(0, 0, 0, 0.5)
Width: App.Width
Height: App.Height
Visible: varIsLoading
Spinner1:
As: icon
Icon: Icon.Loading
Width: 32
Height: 32
Color: RGBA(255, 255, 255, 1)
X: (Parent.Width - Self.Width) / 2
Y: (Parent.Height - Self.Height) / 2
With Label
Spinner1:
As: icon
Icon: Icon.Loading
Width: 32
Height: 32
Visible: varIsLoading
SpinnerLabel:
As: label
Text: "Loading..."
X: Spinner1.X
Y: Spinner1.Y + Spinner1.Height + 8
Visible: varIsLoading
Best Practices
- Use spinners for operations longer than 1 second
- Avoid blocking the UI for too long (consider progress bars for longer tasks)
- Overlay mode should be used sparingly (only for critical blocking operations)
Export Modes
- Safe: Basic spinner icon.
- Advanced: Includes overlay mode, custom speeds, and label support (Pro feature).