Loading Screen
Customize the loading screen appearance (includes native overlay color that is displayed during initial loading phase).
| Parameter | Type | Default | Description | Effect |
| loadingStickmanColor | string | Theme default | Stickman animation color | Changes the color of the loading animation character |
| loadingBackgroundColor | string | Theme default | Background color | Sets the loading screen background color |
| loadingTextColor | string | Theme default | Text color | Sets the color of loading text and messages |
SDK Support:
- Swift: Direct support via
IStyleclass (hex values with #) - Flutter: Direct support via
IStyleclass (hex values without #) - Kotlin: Direct support via
IStyledata class (hex values without #) - React Native/React: Direct support via
styleobject (hex values without #) - HTML/JS: Direct in postData object
Native Loading Overlay (Swift):
The SDK displays a native overlay on top of the WebView until content is fully loaded, preventing users from seeing a blank screen.
- Overlay automatically hides when
KinestexLoadedmessage is received - Overlay color priority:
1. Uses loadingBackgroundColor if set (hex color with #)
2. Uses white (#FFFFFF) if style = "light"
3. Uses black (#000000) if style = "dark" (default)
Style Properties:
| Property | Type | Default | Description |
| style | String? | "dark" | Base theme style ("dark" or "light") |
| themeName | String? | null | Custom theme name |
| loadingStickmanColor | String? | null | Color for the loading animation stickman (hex without #) |
| loadingBackgroundColor | String? | null | Background color during loading (hex without #) |
| loadingTextColor | String? | null | Text color during loading (hex without #) |
Loading Screen Customization
1// Direct SDK support via IStyle class
2let customStyle = IStyle(
3 style: "dark",
4 loadingBackgroundColor: "#1A1A2E",
5 loadingStickmanColor: "#FF6B00",
6 loadingTextColor: "#FFFFFF"
7)
8
9kinestex.createWorkoutView(
10 workout: "Fitness Lite",
11 user: user,
12 style: customStyle,
13 isLoading: $isLoading,
14 onMessageReceived: { /* ... */ }
15)