Loading Screen
Customize the loading screen appearance (includes native overlay color that is displayed during initial loading phase). Applies to: All integrations — the loading screen is shown while any view verifies and downloads resources.
| Parameter | Type | Default | Applies to | What it does internally |
| loadingStickmanColor | string | #00FF0B | All | Color of the animated stickman loading character |
| loadingBackgroundColor | string | Black (dark) / White (light) | All | Loading screen background color |
| loadingTextColor | string | White (dark) / Black (light) | All | Color of the loading text and progress messages |
Color format: a bare 6-character hex value (e.g. "1A1A2E") gets a # added automatically; #RRGGBB and CSS color names also work. Avoid 3-character shorthand hex ("fff") without # — it is passed through as-is and is not valid CSS.
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 #) |
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)