Circle Loader
The Circle Loader is the loading indicator that appears while a page is loading inside your app. It overlays your content with a background and a spinner — or a custom animated GIF — giving users a visual cue that something is happening. You can fully control its appearance, timing, and which pages show it.
Background Color
Set the background color that appears behind the loader for both Light and Dark themes.
- Light Mode default:
#ffffff - Dark Mode default:
#000000
The background also supports 8-digit HEX codes for alpha transparency, so the page content can remain partially visible while the loader is active.
| Transparency | Example HEX | Effect |
|---|---|---|
| 100% (fully opaque) | #000000FF | Content completely hidden |
| 50% | #00000080 | Content half-visible |
| 0% (fully transparent) | #00000000 | Loader overlay invisible |
Loader Style
| Option | Description |
|---|---|
| Default Style | A circular spinner with a customizable color |
| Custom GIF Animation | Your own animated GIF displayed as the loader |
Use the default spinner for a clean, lightweight look. Use a custom GIF for a fully branded loading experience.
Loader Color
Set the color of the spinner. Only applies when Default Style is selected.
- Light Mode default:
#186E62 - Dark Mode default:
#186E62
Custom GIF
Upload your animated GIF when Custom GIF Animation is selected.
- Accepted format: GIF only
- Maximum file size: 3 MB
When to Show
Control how often the loader appears.
| Option | Description |
|---|---|
| Show always on page load | Displays on every page navigation (default) |
| Show only on first page load | Displays once when the app first opens |
Use "first page load only" if you want faster perceived navigation after the initial load.
Hide Delay
Set an optional delay (in milliseconds) before the loader disappears after a page finishes loading. A short delay — around 500–1000 ms — can prevent a visual flicker on pages where content takes a moment to render even after the load event fires.
- Default: No delay (hides immediately when loading is complete)
Visibility Rules
You can control which pages show the loader and which pages skip it.
Show Circle Loader Only on These URLs
The loader will only appear when the current URL matches one of the patterns you specify.
Hide Circle Loader on These URLs
The loader is shown everywhere except on pages that match the patterns you specify.
Enter one domain, full URL, or URL fragment per line. Both fields support wildcard patterns (*) for dynamic paths and square brackets [ ] for exact URL matches.
| Example | Matches |
|---|---|
example.com/shop | Any URL containing /shop |
[example.com/checkout] | Only the exact URL example.com/checkout |
example.com/*/product | URLs like example.com/1/product, example.com/store/product |