# 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 `IStyle` class (hex values with #)
- **Flutter:** Direct support via `IStyle` class (hex values without #)
- **Kotlin:** Direct support via `IStyle` data class (hex values without #)
- **React Native/React:** Direct support via `style` object (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 `KinestexLoaded` message 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**

_Swift (iOS)_
```swift
// Direct SDK support via IStyle class
let customStyle = IStyle(
    style: "dark",
    loadingBackgroundColor: "#1A1A2E",
    loadingStickmanColor: "#FF6B00",
    loadingTextColor: "#FFFFFF"
)

kinestex.createWorkoutView(
    workout: "Fitness Lite",
    user: user,
    style: customStyle,
    isLoading: $isLoading,
    onMessageReceived: { /* ... */ }
)
```

_Kotlin (Android)_
```kotlin
// Direct SDK support via IStyle class
KinesteXSDK.createWorkoutView(
    context = this,
    workoutName = "Fitness Lite",
    style = IStyle(
        style = "dark",
        loadingBackgroundColor = "1A1A2E", // hex value without #
        loadingStickmanColor = "FF6B00",
        loadingTextColor = "FFFFFF"
    ),
    isLoading = viewModel.isLoading,
    onMessageReceived = { message ->
        handleWebViewMessage(message)
    },
    permissionHandler = this
)
```

_React Native_
```jsx
// Direct support via style object
const postData: IPostData = {
  key: 'YOUR_API_KEY',
  userId: 'user-123',
  company: 'YOUR_COMPANY',
  style: {
    style: 'dark',
    loadingBackgroundColor: '1A1A2E', // hex without #
    loadingTextColor: 'FFFFFF',
  },
  customParameters: {
    loadingStickmanColor: '#FF6B00', // via customParams
  },
};
```

_Flutter_
```dart
// Direct SDK support via IStyle class
KinesteXAIFramework.createWorkoutView(
  workoutName: "Fitness Lite",
  isShowKinestex: showKinesteX,
  isLoading: ValueNotifier<bool>(false),
  style: IStyle(
    style: 'dark',
    loadingBackgroundColor: '1A1A2E', // hex without #
    loadingStickmanColor: 'FF6B00',
    loadingTextColor: 'FFFFFF',
  ),
  onMessageReceived: (message) {
    handleWebViewMessage(message);
  },
);
```

_HTML / JavaScript_
```html
// Direct in postData object
const postData = {
  userId: "user-123",
  company: "YOUR_COMPANY",
  key: "YOUR_API_KEY",
  loadingStickmanColor: "#FF6B00",
  loadingBackgroundColor: "#1A1A2E",
  loadingTextColor: "#FFFFFF",
};
```

_React (TypeScript)_
```tsx
// Direct support via style object
const postData: IPostData = {
  key: 'YOUR_API_KEY',
  userId: 'user-123',
  company: 'YOUR_COMPANY',
  style: {
    style: 'dark',
    loadingBackgroundColor: '1A1A2E', // hex without #
    loadingTextColor: 'FFFFFF',
  },
  customParameters: {
    loadingStickmanColor: '#FF6B00', // via customParams
  },
};
```

---
Source: https://kinestex.com/docs/customization-parameters/loading-screen · Index: https://kinestex.com/llms.txt